CSS基本知识3-CSS盒模型

box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

 

 

 

 

 

 

 

 

 

 

 

这里头的问题在于，CSS2.1规定默认是content-box,即W3C标准模型，另一种为IE传统模型也叫怪异模型border-box。

当然现实是很残酷的，看看现在的Bootstrap或Foundation，都又使用了border-box模式，这说明什么？说明IE一开始干对了，W3C把这事给搞错了。遵循W3C的布局，带来了很多潜在问题，这是一个巨大的灾难，虽然没有人指出这一点。

这两者的差异主要是，W3C的Width（Height)计算，不包含Padding和Border，Border-box模式，Width包括内容，Padding，Border。

后者的好处是非常明显的，比如我定义一个Width：200px的DIV，后来我又要给加个1px边框，这下好了，W3C标准下，布局乱了，要不就得重新调整Width等，变成了

Width:199px;border:1px，计算起来相当麻烦，这在多个嵌套DIV里，加边框及改变Padding的时候尤其麻烦。

使用传统模式：就明显的分布了盒内和盒外，外边就是Margin，里边就是Width，这样计算起来简单多了。

另一个问题是Form表单元素多使用border-box模式。

那么，使用border-box模式来布局，就需要注意浏览器兼容性，考虑到Bootstrap等的应用，及移动应用，应该选择全站border-box模式。

遗憾的是，现在的绝大多数网站使用了默认的content-box模式，而新型的Bootstrap等使用了全局的border-box模式。

如何修复两者的不兼容？

当然全部改正也是应该的，但不想大改的情况下，在引入Bootstrap等框架后，把原来布局出错的部分，加上：box-sizing:content-box属性。

更详细的参考此文：

http://www.w3cplus.com/content/css3-box-sizing