CSS3 - 盒子模型

http://www.lampbrother.net

在浏览器上运行的网页实际上是一份HTML文件，这份文件的主体则是由多个HTML标签所组成， 网页在显示这些标签的时候，会使用盒子模型来计算这些标签该如何显示在网页上。盒子模型的定义里，每个显示在网页上的标签都是一个矩形对象，这些矩形对象包含了各种显示样式，在浏览器显示网页给用户时，会依照这些显示样式，来决定网页上标签的面积、边距、位置等显示外观。

另外，盒子模型中的矩形对象都包含了一个内容区域，这个内容区域能够容纳其他的矩形对象，盒子模型通过这样一层套一层的方式，将树状结构的标签，展开成为树状结构的矩形对象。浏览器在显示网页给用户时，会依照这个树状结构的矩形对象，来决定矩形对象之间会互相影响的显示外观。

矩形对象的主要的几个样式如下：

1.外边距（margin）：定义了矩形对象与其他矩形对象之间的距离，包括矩形对象与内容区域之间的距离、同一个内容区域内相邻的两个矩形对象之间的距离。

(1)margin的属性内容可以设置为长度、百分比、auto等属性。

http://www.lampbrother.net

当设置为百分比时，会依照父矩形对象的内容区域大小来作为百分比的计算基数；

当设置为auto时，浏览器会参照矩形对象本身、父矩形对象、定位样式等的样式，由浏览器自动配置矩形对象的外边距大小。

(2)外边距合并功能：上下两个相邻的矩形对象之间的外边距会合并，合并后的外边距会以较大的数值作为设置值。

http://www.lampbrother.net

2.边框（border）：定义边框的框线样式与框线粗细，还有颜色。

3.内边距（padding）：内边距定义内容区域与边框之间的距离。同样的，其属性值可以是长度、百分比（同外边距）等。

http://www.lampbrother.net

4.宽度和高度（width、height）：定义盒子模型的内容区域的大小，其属性可以是长度、百分比和auto等。

http://www.lampbrother.net