两种Box Model(盒模型)的理解、区别以及注意事项

盒模型，可以简单解释为：盒模型用来描述元素�所占据的空间。

boxdim.png

有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型
这两种盒模型，主要区别是在解释元素的width和height属性上。
W3C盒模型认为：元素的with和height属性仅仅指content area。
IE盒模型认为：元素的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默认的仍旧是IE盒模型(quirks model模式)。

其实， IE盒模型更符合人们的思考方式，所以W3C在css3.0中加入了box-sizing，用来修改css box model，默认值是content-box(W3C的盒子)，border-box值设置IE盒子。

�Tips：

1. 以前由于思考习惯和看到设计切的图以及在浏览器中看到实际的html页面等原因，错误的将元素的width、height属性当做元素的实际宽、高，经过这段时间的研究，终于对这个问题有了新的认识。由于margin始终是transparent(透明)，更容易在计算元素宽高时将其忽略掉。
2. background-color
   设置元素的背景色：包括content padding border，不包括margin
   margin背景色始终为transparent
3. 外边距合并(塌陷)(collapsing margin)
   MDN - 外边距合并
4. css3 中内容大小
   如果box-sizing是默认值(content-box)，width, min-width, max-width
   , height, min-height与 max-height控制内容大小。

参考：
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