box-sizing

box-sizing这个属性主要是为了更改CSS盒子模型。
主要有以下几个值：

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

标准盒子模型和IE盒子模型

首先，我们需要区分一下标准盒子模型和IE盒子模型，下面这张图能说明问题所在。

box-sizing: content-box;

表示元素处于标准盒子模型
我们设定一个元素的宽度，只是设定了content区域
因为：
width = content (标准盒子模型)

.box { box-sizing: content-box; width: 200px; height: 200px; background: pink; border: 5px solid; padding: 20px; margin: 10px; }

红色框内的区域就是content，也就是我们设定的width: 200px;
写了2字眼的地方是padding，换句话说，红色框与黑色边框之间的区域全部是padding，padding: 20px;
黑色边框是我们设定的border: 5px solid;
最后是灰色的区域，也就是我们设定的margin: 10px;

其实就是在设定上面第一个图中的content。
此时这个元素总的宽高计算如下：

总宽
   =左右margin+左右border+左右padding+content    =左右margin+左右border+左右padding+width    = 20px+10px+40px+200px=270px 总高
   =上下margin+上下border+上下padding+content    =上下margin+上下border+上下padding+height    =20px+10px+40px+200px=270px

box-sizing: border-box;

表示元素处于IE盒子模型
我们设定一个元素的宽度，只是设定了content区域，相当于我们已经将border,padding,content全部包含在内了。
因为
width = 左右border + 左右padding+ content

body { padding: 0; margin: 0; }
.wrapper { background: rgba(0, 0, 0, 0.1); border: 1px solid black; }
.box1 { box-sizing: content-box; width: 200px; height: 200px; background: pink; border: 5px solid; margin: 10px; padding: 20px; }
.box2 { box-sizing: border-box; width: 200px; height: 200px; background: lightgreen; border: 5px solid; margin: 10px; padding: 20px; }

为什么第二个盒子看起来比第一个小呢？
因为如下：

总宽
   =左右margin+左右border+左右padding+content    =左右margin+width    = 20px+200px=220px 总高
   =上下margin+上下border+上下padding+content    =上下margin+height    =20px+200px=220px

220px比起上面的270px当然要小很多啦。