CSS布局（一）

本节内容：

没有布局

display属性

margin:auto;

max-width

盒模型

没有布局

如果想把所有内容都塞进一栏里，那么不用设置任何布局也是可以的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从最右向最左一大段距离。

display属性

dispaly属性是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个block元素通常被叫做块级元素。一个inline元素通常被叫做行内元素。

block：

div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p、form以及html5中的新元素：header、footer、section等等。

inline：

span是一个标准的行内元素。一个行内元素可以在段落中，包裹一些文字而不会打乱段落的布局。a元素（链接）是最常用的行内元素。

none：

另一个常用的display值是none。一些特殊元素的默认display值是它，例如script。display:none通常被JavaScript用来在不删除元素的情况下隐藏或显示元素。

它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间，但是visibility：hidden;还会保留。

每个元素都有一个默认的display类型。不过可以随时随地的重写它。可以把有特定予以的元素改成行内元素。常见的例子是：把li元素修改成inline，制作成水平菜单。

margin:auto;

<div id="main" style="width:600px;margin: 0 auto;border:1px solid black">
</div>

设置块级元素的width可以阻止它从左到右撑满容器。然后就可以设置左右外边距为auto来使其居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。以上的div会居中显示在浏览器中间。

        问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚懂条来容纳页面。接下来改进这个方案......

max-width

<div id="main" style="max-width:600px;margin: 0 auto;border:1px solid black">
</div>

在这种情况下使用max-width代替width可以是浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整一下浏览器即可见到效果。（所有的浏览器包括IE7+在内都支持max-width）

盒模型

当设置了元素的宽度，实际展现的元素却能够超出设置：因为元素的边框和内边距会撑开元素。情况如下（两个div设置了一样的width值，大小却不一样）：

simple类的div元素的盒模型（Chrome上显示，可见元素没有内边距padding值，border实际值时0.667，设置是1像素；上下外边距是20像素，左右外边距是361.333两边自动平分，实际div大小是蓝色的块状,由此可见margin:0 auto也是一种居中方式）。

fancy类的div元素的盒模型。内边距padding值是50像素，border值是0.667，设置值是1像素；margin设置和simple一样。而实际div的大小和simple一样。但是显示的div框却因padding、margin值给撑开了而显得大得多。