以下图片及资料选自：

盒模型的分类：

盒模型粗略地分为IE盒模型和W3C标准盒模型

IE 盒模型(IE6及以下的表现)：

这个盒模型同标准要求的不同，由IE创造出来的一个标准外的东西。 在IE环境下：

一个元素的宽度大小计算式：

content+padding+border

盒子的总宽度大小计算式：

margin-left+width+margin-right

W3C标准盒模型：

一个元素的宽度大小计算式：

content

盒子的总宽度大小计算式：

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

尽管IE的坑的都为前端开发人员所诟病，但是这个IE盒模型在开发当中却是以CSS3属性的box-sizing:border-box的形式出现， 让我们的布局能够简便地进行运算。

区域的概念：

在CSS中，每个元素都可以认为是一个矩形的盒子，盒子总共有四个边： 外边距边、边框边、填充边、内容边。

这几个边分别框住不同的区域。

内容区域：

他是元素真实内容的区域

它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

填充区域：

这块区域会延伸到填充边界，而且如果内容区域有有设置了背景、颜色或者图片的话，他的样式会延伸到填充区域这一块。

内容区域与填充区域的距离可以由padding这个属性来进行设置。

边框区域：

由边框边界包裹的区域，大小为 border-box 宽和 border-box 高

外边距区域：

这片区域用来分隔元素之间的距离，它的大小为 margin-box 的高宽。

具体区域如下：

外边距合并：

块级元素之间上下外边距会出现重叠的情况，这意味着如果有两个块级元素A和B，A有下边距12px，B有上边距10px，那么如果他们在满足以下条件就会发生重叠，他们之间的边距最终会取其中最大的那个，也就是12px：

1.毗邻的两个元素会出现重叠的情况        2.父元素和它的第一个子元素或最后一个子元素，他们的子元素边距会合并重叠到父元素外面来        3.空元素复制代码

注意！按照MDN文档，第二和第三种情况意味着，元素当中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，也就是单纯只有margin撑开，这样就能还原出情况来。

如果避免这些情况出现，除了编码上的注意，也可以借助BFC：

可以看看我的另外一篇博文，为了清晰地分开不同的知识点，就不在此赘述了。