<分区>
我在一个教程中看到了这个调整框大小的 CSS 重置技巧，我读了一些关于它的内容，但我不明白为什么要以这种方式完成，而不是仅应用于通用选择器。例如，为什么这样:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
与其仅仅在第二部分设置 border-box 属性并删除 html 选择器，理论上如果我理解正确的话它应该做同样的事情。每个选择器和伪元素都会应用 border-box 属性。
最佳答案
什么
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
意思是 html 元素具有 box-sizing: border-box，然后所有元素都将继承其父元素的 box-sizing。
因此，如果您喜欢“开始于”每个元素都从 html 的设置中继承 box-sizing，因为没有人告诉它有什么不同。
但是假设你有某个地方
.mydiv {
box-sizing: content-box;
}
使用 HTML
<div class="mydiv">
<header>some text...
</header>
</div>
您希望 header 元素的框大小是多少？
上面的 inherits 设置是说“我希望 header 从其父级继承其 box-sizing”，即 content-box。
如果我们在开始时将所有内容设置为 border-box，它就不会继承，它将使用它设置的内容，border-box。
关于html - 为什么继承 box sizing css reset 而不是直接将其应用于所有元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64634518/