盒子模型本质就是从某特定的方面来描述一个长方形盒子。CSS盒子模型，通过描述DOM中的一个元素，以及该元素根据可视化格式模型在文档中的布局，从而形成的一种概念模型。
模型尺寸
每个盒子（元素）都包括：内部区域（inner edge）content以及可选、可再设置的周围属性：padding、margin、border。（根据浏览器的不同，每个属性的默认值都是有些差异的。主要区分的是PC端：IE和其他高版本浏览器；移动端：微信浏览器、android和IOS中的浏览器。）
既然讲的是尺寸，那就需要提到怎么实现这个尺寸了。content的区域的尺寸，可以根据盒子中的内容的多少进行变化，图片，文字的大小，数量等等；也可以设置width和height属性的值来进行改变。padding、margin、border可以直接设置值来进行控制。
图 1.1 盒子模型
浏览器实现与标准的差异？
标准是好的，但并不是每个浏览器都能乖乖的遵循这个规则，总会有那么两个闹腾的。低版本的IE浏览器（IE6/IE5）就是相当出名的一伙。
每个Element都是干嘛用的？包裹内容（或空内容）呗！那么这个内容的长宽尺寸怎么定义，就出现分歧了。参考 图1.1
IE6：元素width=内容的宽高+padding +border （若你设置一个元素的width=100px，padding=20px，然后你发现你的文字、图片的宽度只有100-20*2=60px了。）
其他：元素width=内容的宽高
怎么解决呢？好吧！最简单粗暴的方法就是计算：减去加上padding和border的值，内容显示的统一性。
CSS3之box-sizing？
目的：属性用来指定width和height的值应用在内容框还是者边框框上。并不兼容低版本的浏览器哦！！
Note：使用这个属性可以向IE6一样对盒子的解析方式。就平常开发过程中，会发现border-box（IE6解析方式），更加方便合理点。
Margin失效？
描述：多个div嵌套，出现内层的margin-top设置的值作用到了外层的div上。IE中常会出现。
解决：
- 父层div设置：overflow：hidden
- margin-top改成padding-top
- 父元素产生边距重叠的边，有不为 0 的 padding 或 宽度不为 0 且 style 不为 none 的 border；父层div加：padding-top: 1px;
- 让父元素生成一个 block formating context（实现方法见下表）；父层div加：float: left/right；position: absolute；display: inline-block/table-cell (或其他 table 类型)；overflow: hidden/auto
参考：
（1）Box model（www.w3.org）