盒模型，可以簡(jiǎn)單解釋為：盒模型用來描述元素?所占據(jù)的空間。

boxdim.png

有兩種盒模型：W3C盒模型(標(biāo)準(zhǔn)盒模型)和IE盒模型
這兩種盒模型，主要區(qū)別是在解釋元素的width和height屬性上。
W3C盒模型認(rèn)為：元素的with和height屬性僅僅指content area。
IE盒模型認(rèn)為：元素的with和height屬性 由content area + padding + border組成。

所以：
W3C盒模型 元素的總共寬和高：
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
?IE盒模型 元素的總共寬和高：
Total element width = left margin + width + right margin
Total element height = +top margin + height + bottom margin

在IE5.5和以及更早的IE版本中，IE都采用了IE盒模型，從IE6開始提供了一種IE使用W3C盒模型的方式：在html中聲明Doctype。但是，IE6默認(rèn)的仍舊是IE盒模型(quirks model模式)。

其實(shí)， IE盒模型更符合人們的思考方式，所以W3C在css3.0中加入了box-sizing，用來修改css box model，默認(rèn)值是content-box(W3C的盒子)，border-box值設(shè)置IE盒子。

?Tips：

1. 以前由于思考習(xí)慣和看到設(shè)計(jì)切的圖以及在瀏覽器中看到實(shí)際的html頁(yè)面等原因，錯(cuò)誤的將元素的width、height屬性當(dāng)做元素的實(shí)際寬、高，經(jīng)過這段時(shí)間的研究，終于對(duì)這個(gè)問題有了新的認(rèn)識(shí)。由于margin始終是transparent(透明)，更容易在計(jì)算元素寬高時(shí)將其忽略掉。
2. background-color
   設(shè)置元素的背景色：包括content padding border，不包括margin
   margin背景色始終為transparent
3. 外邊距合并(塌陷)(collapsing margin)
   MDN - 外邊距合并
4. css3 中內(nèi)容大小
   如果box-sizing是默認(rèn)值(content-box)，width, min-width, max-width
   , height, min-height與 max-height控制內(nèi)容大小。

參考：
https://www.w3.org/TR/CSS21/box.html#box-dimensions
http://www.w3schools.com/css/css_boxmodel.asp
MDN--盒模型
維基百科 -- IE盒模型缺陷
Internet Explorer and the CSS box model
box-sizing屬性
box-sizing屬性 02
MDN -- background-color
W3C -- background-color