外边距实现单列布局
1. 前言
单列布局可以有很多种的方式去实现它，这一小节我们将运用最简单的 CSS 技术，然后由浅入深，最简单的 CSS 技术就代表了最优越的兼容性，无论多么老旧的浏览器，几乎都没有不认识外边距这个语法的。
2. 实例 代码
这种 方法 不仅兼容性也非常的优异，同时也是最简单最好用的：
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 令html和body全屏 显示 , 并有 一个 灰色背景 */
html, body { height : ; background : gray ; }
.center {
/* 给个宽高方便查看 */
width : ;
height : ;
/* 外边距上下为0、左右为 自动 */
margin : auto ;
/* 白色背景 */
background : white ;
}
</ style >
</ head >
< body >
< div class = " center " > </ div >
</ body >
</ html >
运行结果：
这样的 一个 最简单的单列布局就形成啦！
3. 小结
单列布局除了外边距法还有很多种方式可以去实现，下一小节我们就来讲解一下最最流行的弹性布局法。
弹性布局 ? ? 单列布局简介声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did254501