某人专用教程（第4天）—— 开始布局
今天就正式开始写代码了。
?
额。。hello world不用讲了吧？
?
我们直接开始写一些布局。
?
第一个是单栏布局。也就是只有一行的布局。这种布局一般有2种情况。一种是定宽度的。比如宽为800px，另一种是100%宽度的俗称自适应浏览器宽度。
?
不管哪种形式，单栏布局，就是相当于把所有内容放在一个容器内。一般，这种纯作为布局容器使用的情况下，我们都使用div标签。
?
html代码是这样的
?
<div name="code">.box{width:100%}?
但实际上，对于这种情况，我们根本不需要写任何css。因为本来本来div默认就是display:block形式的。而display:block形式的元素，默认就是width:100%。
?
接下来，我们来写宽度是800px的css啦。
?
?
.box{width:800px;}??
通过设置width属性值为800px，我们就可以方便的设置这个容器的宽度了。
?
可是看一下呈现效果。。是不是偏向页面左侧对齐了？但是现在看到的大部分网页，都是居中对齐的，对吧？怎么让这个东西在浏览器中居中对齐呢？如果看了那个css手册，会不会第一反应就是text-align:center;呢？然后，我们把css写成这样子：
?
?
.box{width:800px;text-align:center;}?打开浏览器看看，是不是好使了？
?
额。。看你用什么浏览器了。如果用chrome什么的，估计就没有自己猜测成功的感觉了。在老版本ie浏览器下，估计自己会小小的兴奋下。转到非IE下，就郁闷了。感情不是所有浏览器都好使的。（比较新版的IE我木有实验，你当我懒吧，懒死我算了）。那么这时候我们就要解决浏览器所谓的“兼容性”问题了。
?
那么，怎么样使所有浏览器都兼容呢？
?
其实一个块级元素的居中，并不是用text-align:center完成的。你看看text-align，前缀是text啊，也就是定义文本的。文本可不是一个大div。。
?
css中的margin属性提供了一种margin-left:auto;margin-right:auto的方式，专门做这件事情。
?
margin是css中最常见的属性之一。表示一个容器的外边距。margin属性可以拆分成margin-left,margin-right,margin-top,margin-bottom这四个方向的边距。当然也可以直接用margin属性，通过一定规则来合并四个方向的外边距。
?
合并的规则是从top值开始顺时针转圈。
margin:top right bottom left。
如：margin:10px 20px 30px 40px;
?
如果其中，左右的值一样。。那么可以写成margin:top left/right bottom。也就是将左右两侧的值合并在一起，也相当于，如果margin-left和margin-right相等。则可以不写margin-left的值。如：margin:10px 20px 30px 20px可以写成margin:10px 20px 30px;
?
如果，左右的值一样，上下的值也一样，就可以合并成margin:top/bottom right/left。相当于后面两个值都可以不写。如：margin:10px 20px 10px 20px可以写成：margin:10px 20px;
?
如果四个值一样，就直接写成margin: top/right/bottom/left。如margin:10px 10px 10px 10px可以写成margin:10px;
?
所以，刚才说了，块级元素的居中，采用margin-left:auto;margin-right:auto来表示，其实通常合并写为margin:0 auto;这个0 一般是上下边距。值也可以不为0，根据设计稿来调整。
?
最后，我们将css代码写成
?
box{width:800px;margin:0 auto;}?就完成了一个固定宽度的单栏布局。
?