box-sizing是什么
一言以蔽之，box-sizing用来控制元素的内容区域的宽/高与padding，border之间的关系；
正常的盒模型：
- 元素的内容区域宽度=width；
- 元素的内容区域高度=height；
- 元素实际占的宽度=width+padding+border；
- 元素实际占的高度=height+padding+border；
正常显示
从图中可以看出 元素实际占的宽度为 420px（10px+50px+300px+50px+10px）。
当我们在该div上设置一个 box-sizing:content-box;效果跟默认的一致，也就是说默认的盒子模型就是
box-sizing:content-box; 如下图所示：
box-sizing:content-box
当设置 box-sizing:border-box;时，元素的实际宽度就为 300px了，也就是实际宽度值就是 width的值，而该div的内容区的宽度则为除去 padding 和border后的宽度；如下图所示：
