一、盒模型的组成

盒模型是CSS布局的最基本组成部分，它是指定页面元素如何显示及在某种方式上如何相互交互。在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内边距(padding)、边框(border)、外边距(margin)组成的，如下图所示：

从上图可以清楚的理解任何一个元素的内容区域都是被内边距(padding)、边框(border)、外边距(margin)这3个属性所包含。一个元素的盒模型有多大，那么该元素在页面中占用的空间也将会有多大。

注意: 如果给某元素加上背景色或者背景图片，那么该元素的背景色或者背景图片也将出现在内边距(padding)之中。

二、盒模型实验

1、
为了更好的理解这三个属性对元素内容的影响，我们通过一个简单的实验步骤来体会一下盒模型。

<style type="text/css">
    div {
        width: 200px;
        height: 30px;
        padding: 0;
        border: 0 none;
        margin: 0;
        color: #FFFFFF;
        background-color: #000000;
    }
</style>
<div>我是第一个div</div>
<div>那我是第二个div</div>
<div>(╯﹏╰)b我是第三个div</div>

前面提到盒模型中元素内容区域被内边距(padding)、边框(border)、外边距(margin)这3个属性所包含，因此先将这3个属性都设置为0，不让它们在盒模型中出现。效果如下图所示：

2、
修改内边距的属性，将其属性值改为20px后，会发现文字内容的空间增大了，但背景色还都混在一起，仿佛是在一个div标签中添加了背景。

<style type="text/css">
    div {
        ……
        padding: 20px;
        border: 0 none;
        margin: 0;
        ……
    }
</style>

效果如下图所示：

3、
正如前面所提到的，背景色或者背景图片都是现实在内边距(padding)及内容区域的。为了将每个div标签区分，在添加内补丁(padding)属性值的基础上修改边框(border)属性的属性值，将其修改为边框粗细为5px、颜色为红色的实线边框。

<style type="text/css">
    div {
        ……
        padding: 20px;
        border: 5px solid #FF0000;
        margin: 0;
        ……
    }
</style>

效果如下图所示：

4、
边框将3个div分开，但是带来了一个问题，那就是边框都紧挨在一起。这样的结果并不是我们想要的。此时我们就可以利用外边距的功效，给每个div的添加10px的外边距底边。

<style type="text/css">
    div {
        ……
        padding: 20px;
        border: 5px solid #FF0000;
        margin-bottom: : 10px;
        ……
    }
</style>

效果如下图所示：

四个实验过程讲述了盒模型的基本构造。

三、外边距的合并

我们刚才设置div的外边距底边为10px，此时，我们修改为：

<style type="text/css">
    div {
        ……
        padding: 20px;
        border: 5px solid #FF0000;
        margin: 10px;
        ……
    }
</style>

刷新页面，我们发现div之间的外边距还是10px。如下图所示：

但是第一个div的底部margin加上第二个div的顶部margin不应是是20px吗，google发现，原来我们的外边距发生了合并。参照W3C如下：
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。