5分钟搞定box-sizing

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后的宽度；如下图所示：

box-sizing:border-box;