在所有CSS规则中应用border-box。

Question

根据这篇文章的说法，我们应该遵循以下做法：

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

但我认为这个更正确：

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

由于*包含html，伪元素前面是::而不是与伪类相对应的:。

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

- CSSAsker

---

以下是一些关于为什么使用 inherit 可能更好的评论：https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ - jspcal

请查看@CSSAsker的答案。 - Hamad

@jspcal 是的，如果你想在某些情况下使用 content-box，那么 inherit 更好。但是，如果你不想使用它呢？如果你总是想使用 border-box 呢？ - CSSAsker

如果你最初将它设置为inherit，那么当你在某个子容器级别更改它时，所有内部节点都会继承新值。 - mccambridge

我知道@mccambridge，但如果你只想在整个文档中使用border-box（从不使用content-box）呢？ - CSSAsker

@CSSAsker 然后你可以直接使用 * { box-sizing: border-box; }。 "规范"答案试图以优雅的方式涵盖最灵活的用例。 如果您确定始终使用 border-box，那么就使用 *。 在 CSSTricks 上不会看到它被炫耀。 但是，如果它适合您，请不要受传统约束。 话虽如此，您会发现传统通常是您的朋友。 如果某件事是传统的，那么很可能有很好的理由。 - mccambridge

Answer 1

让我来解答这个问题。最早的box-sizing: border-box; 重置样式如下:

   * {
  box-sizing: border-box;
}

这个方法还算不错，但它没有包括伪元素，可能会导致一些意外的结果。一个修订后的重置样式很快出现了，它包括了对伪元素的覆盖：

通用盒模型

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

该方法也选择了伪元素，改善了border-box的规范化效果。但是，*选择器使开发人员难以在CSS中使用content-box或padding-box。这就引出了当前最佳实践的领先者：

如果它解决了您的问题，请投票支持社区的时间和帮助。如果您有任何问题，请随时提问。谢谢。

- Hamad

---

但如果您只想使用 border-box 呢？而且为什么要使用伪类符号 :，如果 before 和 after 是伪元素 :: ？ - CSSAsker

@CSSAsker，你的问题很棒，它帮助我在预处理器中搜索了它的用法，谢谢你发布这个伟大的问题。 - Hamad

在CSS2中，单冒号和双冒号符号表示伪元素，而在CSS3规范中，只应使用双冒号符号表示伪元素（但也支持单冒号符号以保持向后兼容性）。@CSSAsker - Rodrigo Ferreira

@RodrigoFerreira 我想象中是这样的，因为这篇文章是在2014年写的，但还是谢谢你确认了一下。 - CSSAsker

@CSSAsker 这篇文章会更好地解释它。 - Rodrigo Ferreira