利用 box-sizing: border-box 不增加容器的宽高度
浏览数：7 /
时间：2023年03月18日
全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。
推荐写法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
选择器 * 无法覆盖到伪元素，所以需要给 :before 和 :after 分别设置。而通过继承的方式应用到所有元素，需要时可以方便的设置某个元素及其后代元素的 box-sizing 回 content-box。
推荐写法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
选择器 * 无法覆盖到伪元素，所以需要给 :before 和 :after 分别设置。而通过继承的方式应用到所有元素，需要时可以方便的设置某个元素及其后代元素的 box-sizing 回 content-box。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
