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

【问题标题】：Why inherit the box sizing css reset than apply it directly to all elements? [duplicate]为什么继承box sizing css reset而不是将其直接应用于所有元素？ [复制]
【发布时间】：2020-11-01 16:59:51
【问题描述】：

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

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

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

【问题讨论】：

这有帮助吗？ css-tricks.com/…
我已经读过，但我只是想更通俗地解释那里发生的事情？对不起，但我不明白。为什么特别是继承工作但通用选择器方法没有？理论上我认为应该，但我不明白为什么不是。

标签： html css border

【解决方案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>

您希望 header 元素的 box-sizing 是多少？

上面的继承设置是说'我希望标题从其父级继承其框大小'，即内容框。

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

【讨论】：

我猜如果你一开始就将所有东西都设置为边框框，你仍然可以根据需要应用一个内容框类来覆盖它，这样就可以解决这个问题。
是的，您始终可以为任何一个元素显式设置它，但如果您设置 * ，它的子元素仍将设置在边框框。因此，您可以像问题中那样拥有一个通用的“继承”，也可以拥有一个通用的并记住对子元素的影响是不同的。