CSS设计指南之理解盒子模型

原文:CSS设计指南之理解盒子模型

一.理解盒模型

每一个元素都会在页面上生成一个盒子。因此，HTML页面实际上是由一堆盒子组成的。默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到页面中盒子的结构。使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项，可以方便地显示盒子的边框和背景，从而让我们能从另外一个角度来审视页面的构成。

1.1 元素盒子的属性

1.边框(border):可以设置边框的宽窄、样式和颜色。

2.内边距(padding):可以设置盒子内容区与边框的间距，想像一下内边距是从边框向内推元素的内容。

3.外边距(margin):可以设置盒子与相邻元素的间距，想像一下外边距是边框向外推其他元素。

1.2 盒子边框

边框有3个相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)

1.3 盒子内边距

内边距是盒子内容区与盒子边框之间的距离，如果不设定padding的值，那么元素的文本就会紧挨着元素的边距。如下图所示，在显式设定了width的前提下，padding值的设定会加大盒子的宽度。

1.4 盒子外边距
1.如图4所示，默认情况下，元素之间也会有外边距，


推荐把下面这条规则作为样式表的第一条规则:* {margion:0 ;padding=0;}，这条规则把所有元素默认的外边距和内边距都设定为零。

2.垂直叠加外边距

如上图所示，Div2设定了上外边距，Div3没有设定外边距，但是Div1与Div2的间距和Div2与Div3的间距是一样的，由此说明Div2此时设定的margin-top并没有起作用。
也就是说，较宽的外边距决定两个元素最终离多远，如果把Div2的margin-top设定为15，效果如下图，可以看到Div1与Div2的间距变宽了。

注意:叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和。

二.盒子有多大

2.1 块级元素(block element)
1.没有宽度
所谓没有宽度，就是指没有显式地设置元素的width属性，如果不设置块级元素的width属性，那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素同
宽。没有显式设置width属性的元素始终会扩展到填满其父元素的宽度为止，添加外边距会导致元素盒子变小。

2.设定宽度
为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。


2.2 行内元素

1.没有宽度
inline元素会扩展到足以包裹其内容的宽度，添加内边距和水平边框会导致liline元素变宽，添加量等于水平边框和内边距的和。
2.有宽度的块级元素
为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。

3.2.3
CSS3新增box-sizing属性，通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为。