为什么继承 box sizing css reset 而不是直接将其应用于所有元素？

Question

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

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

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

Answer 1

什么

html {
  box-sizing: border-box;
}

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

是说 html 元素有 box-sizing: border-box 然后所有元素都将继承其 parent 的 box-sizing。

所以，如果您喜欢 'to begin with'，每个元素都会从 html 的设置中继承 box-sizing，因为没有人告诉过它有什么不同。

但假设你有某个地方

.mydiv {
  box-sizing: content-box;
}

和HTML

<div class="mydiv">
  <header>some text...
  </header>
</div>

您认为 header 元素的 box-sizing 是什么？

上面继承的设置说的是'I expect header to inherit its box-sizing from its parent'，也就是content-box。

如果我们在开始时将所有内容都设置为 border-box，那么它将不会继承，它将使用它的设置，border-box。

Why inherit the box sizing css reset than apply it directly to all elements?