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当然要小很多啦。