CSS 从零开始（三）盒模型

CSS2.1 中提出了盒模型的概念，盒模型总结概括了所有元素的基本特征，那么盒模型究竟是一个什么样的概念呢，我们可以用过下面的链接来访问其中图片

从图片来看，一个完整的盒模型有上面四部分组成，即 border(边框)、margin(外边距)、padding(内边距)、element(元素)。简而言之，任何元素都具有上面四个特征。

在计算盒模型的高度宽度时候有两个计算标准分别是：标准盒模型、IE 盒模型

标准盒模型

该模型宽度和高度仅仅是其中 element(元素)的宽度与高度，不包括内外边距以及边框的宽度与高度。

上面这样图就是标准盒模型的计算方式，其中 width、height 指的是 element 的宽度和高度。

早起的 IE 浏览器（ IE6.0 以前）使用的盒模型与其他浏览器有差异，我们称之为 IE 盒模型。

IE 盒模型与标准盒模型的不同在于，该模型的宽度与高度是将元素与内外边距、边框累加起来的总和才是整个模型占用的宽度和高度。

简而言之就是 width = element + padding + margin + border

CSS 中也支持手动设置模型类型，即 box-sizing 属性，content-box 为标准盒模型，border-box 为 IE 盒模型

设置之后宽度高度遵循上方的规则。

/* 标准盒模型 */
box-sizing:content-box;

/*IE 盒模型*/
box-sizing:border-box;

当两个盒模型相遇时，其中垂直相遇的部分的外边距（ margin ）将会被合并，形成一个新的外边距，新的外边距的高度等于两个发生合并的外边距的高度中的较大者。

下面的图可以做一个很好的说明。

上图中两个盒模型，上面的有一个 20px 的 margin-bottom，下面的有一个 10px 的 margin-top，当两个模型垂直相遇时，相遇的部分会被合并，形成一个新的外边距，高度为 20px。

这里可以看到两个 element 之间的 margin 是 20px，而不是想象中的 30px。

当一个元素包含在另一个元素中时，它们的上和 /或下外边距也会发生合并。如下图所示