css3篇——box-sizing

这一篇介绍一个css3的属性——box-sizing

什么是box-sizing

box-sizing是css3的一个属性，它用来改变默认的css盒模型对元素宽高的计算方式。这是什么意思呢？

css中的盒模型分为两种，一种是w3c的标准模型，一种是IE的传统模型，至于这两种模型的区别后面再说，box-sizing就是决定使用哪一种模型。

box-sizing用法

box-sizing: content-box;                     //默认值，让元素维持w3c的标准模型

box-sizing: border-box;                      //让元素维持IE的传统模型

box-sizing: inherit;                              //规定从父元素继承box-sizing的值

注意：IE只有IE8以上的版本才支持box-sizing,其他浏览器使用时也加上各自的前缀

比如：

div {

box-sizing: content-box;

-moz-box-sizing: content-box;                   //firefox

-webkit-box-sizing: content-box;               //safari

-o-box-sizing: content-box;                        //opera

-ms-box-sizing: content-box;                     //IE8以上

}

box-sizing: inherit就不用介绍了，这里重点介绍一下content-box和border-box

box-sizing:content-box(w3c标准模型)

content-box，是默认值，此时维持元素是w3c标准模型，开始就说了box-sizing是决定对元素宽高的计算方式，那w3c标准模型的计算方式是怎样的呢？

元素外盒的宽度/高度 = 内容的宽度/高度+内边距+边框的宽度/高度+外边距

元素内盒的宽度/高度 = 内容的宽度/高度+内边距+边框的宽度/高度

用个例子来说明，如下：

从上面的例子就很容易看出

元素外盒的宽度 = 100px(内容的宽度)+10px(内边距)+2px(边框的宽度)+10px(外边距)

元素内盒的宽度 = 100px(内容的宽度)+10px(内边距)+2px(边框的宽度)

box-sizing:border-box(IE的传统模型)

border-box，此时维持元素是IE的传统模型，w3c的标准模型和IE传统模型的区别就是计算元素的宽高不同，下面是IE传统模型的计算方式：

元素外盒的宽度/高度 = 内容宽度/高度（包含了元素实际内容的宽度/高度、内边距、边框宽度/高度）+ 外边距

元素内盒的宽度/高度 = 内容宽度/高度（包含了元素实际内容的宽度/高度、内边距、边框宽度/高度）

下面的这个例子的数据均与content-box中的例子数据一致

从上面就很直观的看到

元素外盒的宽度 = 100px(内容宽度)+10px(外边距)

元素内盒的宽度 = 100px(内容宽度)

从content-box和border-box这两个例子，我们可以得到，w3c标准模型中设置的元素宽高就等于实际内容宽度，而IE传统模型中设置的元素宽高不只是实际内容宽高，还包括边框宽高和内边距

content-box和border-box分别什么时候用

我们肯定都遇到过这个问题，当把两个块元素并排放在一行，各占50%时，你再给它们增加一点内边距，外边距或者border，都会使第二个块元素跳到下一行，比如下面这个例子：

正常情况下是这样的

当添加一个border后就变成这样了

这时候我们就可以用box-sizing: border-box;了

之所以加上border-box就不换行了，是因为添加box-sizing:border-box后border:1px blue solid并没有额外添加

红色模块的盒子宽度，它只是压缩了原来的红色内容1px，留给了1px给边框，因为边框的宽高就是包含在元素内容

的宽高里面的。

这种情况下用border-box，那不需要的时候当然就是用content-box了，不过content-box不需要写，因为如果不

加box-sizing:border-box的话，默认就是content-box

好了，box-sizing就暂时总结到这了，以后遇到没有总结到的内容会再添加。