css - 在所有 css 规则中应用 border-box

Question

根据 this article ，我们应该遵循这种方法:

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

但我认为这样更正确:

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

因为*包括html，而伪元素前面是::，不是:对应伪类。

我是否将规则正确应用于整个文档？我不想在任何地方使用 content-box。

Answer 1

让我明确答案，

最早的box-sizing:border-box；重置看起来像这样:

   * {
  box-sizing: border-box;
}

这工作得很好，但它遗漏了伪元素，这可能会导致一些意想不到的结果。很快出现了一个覆盖伪元素的修改后的重置:

通用盒子尺寸

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

该方法同样选择了伪元素，提高了border-box的归一化效果。但是，* 选择器让开发人员很难在 CSS 的其他地方使用 content-box 或 padding-box。这将我们带到了当前最佳实践的领跑者:

如果它解决了您的问题，请投票以感谢 Community Combine 的时间和帮助。如果您有任何问题，请随时提问。谢谢。