XHTML+CSS基础知识（三）：盒模型

盒模型的四要素：content（内容）、border（边框）、padding（内边距）、margin（外边距）。

页面当中的每一个元素都会被看做是一个矩形框，这个框有内容、内边距、边框、外边距组成。

1.盒模型的四要素分别指什么？

内边距出现在内容区域的周围，如果在元素上添加背景，那么背景会应用于内容和内边距相加组成的区域。

添加边框会在内边距的区域以外添加框线，这些线可以有多种样式，比如实线、虚线、点线等。

在边框外边是外边距，外边距是透明的，一般使用它来控制元素之间的间隔。

2.盒模型中一个盒子的宽度应该如何计算？在IE当中也是这样的吗？

在CSS当中，width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

但是在IE的早期版本当中（包括IE6），在混杂模式中使用自己的非标准盒模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框宽度的总和，所以一定要注意书写文档声明（DTD）来避免这种情况的发生。

3.两个盒子水平放置的时候外边距如何计算？垂直放置又如何计算？

<div style="width:100px;height:100px;float:left;margin-right:10px;">层一</div>

<div style="width:100px;height:100px;float:left;margin-left:20px;">层二</div>

上述代码在页面上显示为两个层水平排列，中间有30px的空隙，这就证明在盒子水平放置的时候他们的间距是两个盒子左右外边距的叠加。

<div style="width:100px;height:100px;margin-bottom:10px;">层三</div>

<div style="width:100px;height:100px;margin-top:20px;">层四</div>

上述代码在页面上显示为两个层垂直排列，中间有20px的空隙，这就证明盒子垂直放置的时候他们的间距是两个盒子上下外边距当中较大的那个。

<div style="width:100px;height:100px;margin-top:20px;">

　　<div style="width:50px;height:50px;margin-top:30px;"></div>

</div>

上述代码在页面当中显示为外层有30px的外边距，而内层紧贴外层左上角显示，这就证明两个盒子嵌套放置的时候它们的上外边距会取其中较大的那个显示。

<div style="margin-top:30px;margin-bottom:20px;"></div>

上述代码在页面当中显示为与其他相邻盒子相距30px的空白，由此证明，在一个盒子当中如果没有内容且并未规定盒子的宽高，则该盒子的上下外边距会合并为其中较大的那个来做显示。

<div style="margin-top:30px;margin-bottom:20px;"></div>

<div style="margin-top:20px;"></div>

上述代码在页面当中显示为与其他相邻盒子相距30px的空白，由此证明，如果相邻的两个盒子均未限定宽高，且当中无内容，则他们的外边距会合并显示为其中比较大的那个。

另外，只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框、浮动框、决定定位框的外边距是不会发生叠加的。

外边距叠加的大多数问题可以通过添加一点内边距或者元素背景相同的小边框来修复。

4.由于为某个盒子添加内边距会造成其宽高变化，应该如何制作出内容与边框有一定距离的盒子，且不对本身盒子的宽高产生影响呢？

可以使用盒子嵌套的方式来解决这个问题，将包含内容的盒子放在另外一个盒子内部，为其添加一个外边距，或者为外部的盒子添加一个内边距即可。