box-sizing属性

说到 box-sizing不能不提IE 的一个 bug，IE对盒模型的解析问题，w3c规定的标准模式，盒模型站的空间是由 content + padding+ border+margin相加的来。而在IE的怪异模式下盒模型站的空间是由 content +margin相加的来，也就是说。在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的 规范却规定了他们并不能被包含其中。为了解决这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。

box-sizing:content-box

当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding。

box-sizing:border-box

当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。