轉自： 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的影響是一樣的，都是有效果的。
