以下图片及资料选自：
盒模型的分类：
盒模型粗略地分为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：
可以看看我的另外一篇博文，为了清晰地分开不同的知识点，就不在此赘述了。
