聊聊几乎已成为现代事实标准的“box-sizing: border-box”

了解盒子模型

盒子模型的概念不在此讲述，可以百度谷歌了解一下。

了解标准模型content-box

它的最大特点是，当已经设定了width和height值的时候，padding和border不被包含在你定义的width和height之内，也就是说，你定义的width只负责content区域的宽度，如果想得到整个盒子宽度，需要再加上padding和border的厚度。

这个content-box就是标准模型，诞生最早。content-box顾名思义，就是内容盒子。

任何浏览器默认使用的都是标准模型。

content-box的缺点

content-box的最大缺点就是：当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值。是不是很不幸福？

了解“box-sizing: border-box”

“box-sizing: border-box”是一个较新的CSS 3声明，可能一些开发者都不曾听过这个新的CSS声明，更没有用过，既然标准盒子模型诞生的早，又叫做标准盒子模型，为什么CSS 3中还要新增一个“border-box”呢？

border-box的优势

border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。

border-box的兼容性

IE8已经支持border-box，所以兼容性不是问题。

border-box是事实的标准？

现在最著名的CSS框架几乎都采用了border-box，所以它才是事实的标准。框架想要具备栅格系统，就肯定要去使用border-box，如果用content-box会有一种想死的感觉。

怎么用border-box

box-sizing属性是不具备继承性的，原因很简单，box-sizing属性本来就应该是灵活使用的，全局设定为border-box或者全局设定为content-box都有弊端。

假如你确定你的页面整体或者某个大块的所有元素都应当用上border-box，那么你应该搞一个：

* {
    box-sizing: border-box;
}

或者搞一个：

#某id * {
    box-sizing: border-box;
}

通常情况下，上面这种代码是没必要加的，事实上：你只需要在必须使用border-box的元素身上使用border-box，其他所有元素都保持content-box就好了。

border-box的使用场合

子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100% - 20px)）。

作者：microkof
链接：https://www.jianshu.com/p/006a422afb8e
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。