转自： https://segmentfault.com/q/1010000005057015/a-1020000005057235
http://www.cnblogs.com/xiaohuochai/p/6252163.html
盒模型
盒模型又叫框模型，由宽高、内边距、边框和外边距组成
四个盒子结构
1、元素框是指 margin box
元素框: width/height + padding + border + margin
2、可视区域是指 border box
[注意]关于可视区域，一直都有两个争论，一个指border box，另一个指padding box。但从字面去理解，可视区域应该就是指可以看到的区域，应该以border box为准
可视区域：width/height + padding + border
3、客户区是指 padding box
[注意]关于客户区这种说法来源于javascript中的clientWidth和clientHeight
客户区：width/height + padding
4、内容区是指 content box
内容区：width/height
两种盒子模型
一般称IE8及其以上为标准盒子模型（w3c盒子模型），范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE8以下的为IE 盒子模型，范围也包括 margin、border、padding、content，和标准盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
行内盒子
1.不支持width和height
行级盒子的content box的高/宽不是通过height/width设置的。
content box/area的高由font-size决定的；
content box/area的宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。
2.当行内盒子宽度大于父容器宽度（自身width无效）时会被拆分成多个行内盒子。
3.margin和padding对行内盒子的影响（亲自做了测试是这种情况 但不清楚原理）
左右的margin和padding都是有效果的，就不多说了。
上下的margin对行内盒子是无效果的。
上下padding对行内盒子的内容是无效果的（line-height不变），但是对background和border是有影响的，而且影响不同。
首先background，padding-top会覆盖掉相邻的元素包括背景和内容，padding-bottom只会覆盖掉相邻元素的背景，内容并不会。
再是border，padding-top和padding-bottom对border的影响是一样的，都是有效果的。