学会用box-sizing，数学是体育老师教的也没关系

CSS3发布了许多新特性，最好用的莫过于box-sizing了。对于一个非前端方向的程序猿，CSS2的盒子模型简直就是一坨屎，永远都无法理解div的宽度和高度为什么没有包括边框、padding、margin，这么反人类的设计是怎么搞出来的。

在CSS3中box-sizing终于纠正了这个错误：

box-sizing： content-box | border-box | inherit；

参数：
 content-box：css2中的邪恶盒子模型；
 border-box：内边距、边框宽度都向内计算；
 inherit: 继承父元素box-sizing；

来直观的看一下区别吧：

有没有觉得bord-box方式更符合人性设计，我们在调整元素宽度的时候不用在考虑边框和内边距了？另外，如果使用bootstrap的话，建议升级到bootstrap4.x， 已经默认使用box-sizing来设置盒子模型了。

作为非专业前端开发人员，终于可以不用为了几个像素对不起而抓狂了，如果感觉有用请点赞。