某人专用教程（第4天）—— 开始布局

今天就正式开始写代码了。

 

额。。hello world不用讲了吧？

 

我们直接开始写一些布局。

 

第一个是单栏布局。也就是只有一行的布局。这种布局一般有2种情况。一种是定宽度的。比如宽为800px，另一种是100%宽度的俗称自适应浏览器宽度。

 

不管哪种形式，单栏布局，就是相当于把所有内容放在一个容器内。一般，这种纯作为布局容器使用的情况下，我们都使用div标签。

 

html代码是这样的

 

<div class="box">This is a layout box.</div>

 

给这个div一个class名叫box，主要是为了方便控制这个div。

 

固定宽和自适应宽度，这两种说法，都说的是这个容器的表现样式~那么，这就是css需要做的事情啦。

 

首先，我们来写100%宽度的css

 

 

.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;}

 就完成了一个固定宽度的单栏布局。