聊聊几乎已成为现代事实标准的“box-sizing: border-box”
2017.05.22 10:51* 字数 957 阅读 131评论 0喜欢 3
了解盒子模型
盒子模型的概念不在此讲述，但是了解“box-sizing: border-box”的前提就是了解盒子模型。
“box-sizing: border-box”是什么东西
“box-sizing: border-box”是一个CSS 3声明，可能一些开发者都不曾听过这个CSS声明，更没有用过，这个前提下，你眼中的盒子模型，应该是标准模型，也就是说，你一直在使用标准盒子模型，它的最大特点是，当已经设定了width和height值的时候，padding和border不被包含在定义的width和height之内，也就是说，你设的width只负责content区域的宽度，如果想得到盒子宽度，需要再加上padding和border的厚度。也就是说，你的容器默认使用了box-sizing: content-box，content-box顾名思义，就是内容盒子。
那么今天要说的“box-sizing: border-box”，顾名思义，就是边框盒子，也就是说，边框和边框内的padding，都算在width值和height值之内。
既然标准盒子模型诞生的早，又叫做标准盒子模型，为什么CSS 3中还要新增一个“border-box”呢？
content-box的缺点
content-box的最大缺点就是：当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值。是不是很不幸福？
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)）。
网友评论