CSS3中的box-sizing
yibawuqing 2019-06-27
懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型（IE盒模型）。
我们都知道盒模型从里到外主要包括：content，padding，border，margin。如下图：
两种盒模型的宽度width
标准盒模型的width = content
怪异盒模型的width = content + padding*2 + border*2
也就是说，一个div，他的内容宽content为100px，padding为10px，border为1px，margin为10px，那么在标准盒模型的解析下，他的width = 100px，也就是content的宽度
而在怪异盒模型的解析下，他的width = 100px + 1px*2 + 10px*2 = 122px。
box-sizing的作用
了解完这两种盒模型后，在介绍一下box-sizing，他一共有3种值：content-box，border-box，inherit。inherit就是继承父元素的box-sizing值，这里不做介绍。
centent-box就是已标准盒模型的方式解析当前盒子，即此时盒子的width = content的宽度
border-box就是已怪异盒模型的方式解析盒子，此时width = content + padding*2 + border*2
聊到这里已经很明了了，box-sizing的作用就是规定当前盒子已哪种方式解析当前盒子。
使用场景
当然，box-sizing在某些场景下，是非常好用的。比如我们想做一个内边距10px，边框为2px，最终包括边框宽度为100px的div，之前的做法是先算出内容宽width = 100px - 10px*2 - 2px*2 = 76px。这种方式没问题，但是多少有点繁琐，将width的计算给以开发人员来完成显然是不合适的。
此时我们可以把它交给交给计算机来完成，这就需要用到box-sizing来完成。这里通过把div的box-sizing设置为border-box，我们就可以简单的将width设置为100px，其余的padding和border按照给定好的值一一填入，就可以完成这一切工作，省去了人为的计算内容宽content的过程，减少计算量的同时减少了错误率，何乐不为？
