css中的盒模型box-sizing

css中设置盒模型的属性是box-sizing，其属性值最常用的是content-box以及border-box。其中属性值为content-box的元素，又称为标准盒模型，其中google即使用的是标准盒模型；IE使用的是怪异盒模型border-box。

一. content-box

当box-sizing值为content-box时，设置元素样式的width,height即为元素内容的宽度和高度；而元素的宽度（高度）则是元素内容的宽度（高度）+元素的上下padding（左右padding）+元素的上下border（左右border）+元素上下margin（左右margin）；下面用图列举说明。

1. 在谷歌中渲染元素，其样式如下：

从图中我们可以发现，为class为.box的div设置样式后，通过浏览器可以查看到：
元素内容的宽=width;
div元素的宽=width+左右padding+左右border+左右margin;
所以在google浏览器中不设置box-sizing时，其值默认为content-box。我们也可以通过测试发现这一原理：设置了box-sizing为content-box和不设置没有区别。

2. 在IE中渲染

在IE中渲染，设置box-sizing为content-box，样式和google中一致。

二. border-box

若在IE中不设置box-sizing，则其默认值为border-box。若在google中设置了盒模型为border-box，则其渲染如下：

从上图可以发现此时的盒模型计算方式发生了变化：
内容的高度=width-左右padding-左右border;
整个div元素的宽度=width+左右margin;

即css中设置的样式width根据盒模型分两种情形：
当为标准盒模型content-box时：width = 内容的宽度
当为怪异盒模型border-box时： width = 内容的宽度+左右padding+左右border。
在bootstrap中为了兼容浏览器，使用的是border-box。这样布局确保了 padding和border 不会影响元素最终的宽度计算。