CSS全局元素box-sizing设置：指定代码的含义与必要性解析

Hey folks, let's break down everything you need to know about setting box-sizing for all elements in CSS, including that popular snippet and why it matters.

先搞懂box-sizing的核心作用 #

First, let's recap what box-sizing does—it controls how an element's total width and height are calculated:

• content-box (默认值): 元素的宽高仅包含内容区域，额外添加的padding或border会直接增加元素的总尺寸，这经常导致布局超出预期的情况。
• border-box: 元素的宽高包含内容、padding和border。也就是说，如果你设置width: 200px，不管加多少padding或border，元素总宽度都会保持200px，这对实现可预测的布局来说是个关键优化。

解析代码*, *:before, *:after { box-sizing: inherit; } #

Let's break this line by line:

• *: 选中页面上所有HTML元素。
• *:before, *:after: 选中所有元素的伪元素——这些伪元素常用来做装饰（比如图标、分隔线、提示框），同样需要统一的尺寸规则。
• box-sizing: inherit: 让这些元素继承父元素的box-sizing属性值，而不是使用默认的content-box。

通常我们会配合在根元素html上设置border-box，让全局默认使用这个规则：

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

这样一来，所有元素（包括它们的伪元素）都会从根元素继承border-box，成为全局默认的尺寸计算方式。

为什么要使用这段代码？ #

你可能会问：为什么不直接写* { box-sizing: border-box; }？其实使用inherit的方式有这些优势：

• 边缘场景的灵活性：如果某个特定组件需要使用content-box（虽然少见但确实存在需求），你不需要去覆盖全局的*选择器，只需要给这个组件或它的父元素设置box-sizing: content-box;，它的所有子元素就会自动继承这个值。
• 伪元素布局一致性：伪元素默认不会继承box-sizing，显式设置inherit能确保它们和父元素遵循相同的尺寸规则，避免出现装饰性伪元素把内容挤错位的奇怪bug。
• 符合CSS的继承设计思想：CSS的核心就是继承和层叠，使用inherit贴合这个设计逻辑，比强制给每个元素硬设值更易维护、更符合预期。

内容的提问来源于stack exchange，提问作者Mostafa Khan