为什么继承盒子大小调整CSS重置而不是将其直接应用于所有元素？

Question

我在教程中看到了这个盒子大小调整 CSS 重置技巧，并且阅读了一些相关内容，但我不明白为什么它会以这种方式完成，而不仅仅是应用于通用选择器。例如，为什么要这样：

html {
  box-sizing: border-box;
}
    
*,
*:before,
*:after {
  box-sizing: inherit;
}

理论上，如果我理解正确的话，它应该做同样的事情，而不是仅仅在第二部分设置 border-box 属性并删除 html 选择器。每个选择器和伪元素都会应用 border-box 属性。

Answer 1

什么

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>

您期望标题元素的框大小是多少？

上面设置继承的意思是“我希望标头从其父级继承其框大小”，这就是内容框。

如果我们一开始就将所有内容设置为 border-box，它就不会继承，它将使用它所设置的 border-box。