仅设置 { box-sizing: border-box } 并不足以统一盒模型，还需要显式为 ::before、::after 以及表单控件声明该规则。伪元素默认使用的 content-box 往往会导致布局被意外撑开，而旧版 Safari 中表单控件对该属性的继承也并不稳定。若页面还涉及 JS 尺寸计算，则需要同步适配 border-box 包含内边距与边框的计算逻辑。
仅仅写 * 并不能真正统一 CSS 盒模型，必须把伪元素和表单控件也显式纳入规则中——否则在 Safari、旧版 Chrome 或某些第三方组件场景下，页面布局很容易出现溢出、错位等问题。
为什么 * { box-sizing: border-box } 不够用
通配符 * 只能匹配真实存在的 DOM 元素，无法覆盖 ::before 和 ::after 这类生成内容。而这些伪元素默认采用的是 content-box 盒模型，一旦你使用它们绘制装饰线、边框、三角形，或作为布局辅助元素，padding 和 border 就可能额外撑大容器尺寸。
- 常见问题表现：卡片组件添加了
::after { content: ""; display: block; width: 100%; height: 2px; }后，底部意外出现滚动条，或者元素发生换行 - 这通常不是 CSS 写法错误，而是因为该伪元素仍按
content-box计算，2px 高度再叠加自身可能存在的 margin 或 padding 后，最终超出容器边界 - 有些 UI 框架（例如 Ant Design）内部已经设置了
box-sizing: border-box，但如果外层容器增加了padding却没有同步重置盒模型，整体尺寸仍可能再次膨胀
*::before, *::after 必须显式声明
这往往是最容易被忽略的几行 CSS，但却是实现全局统一盒模型时真正有效、最小可用的完整写法：
*, *::before, *::after {
box-sizing: border-box;
}
- 它能够覆盖动态插入的节点、JS 生成场景中的伪元素，以及 CSS-in-JS 注入的样式内容
- 由于不依赖继承机制，而是让每个选择器单独生效，因此可以避免“明明写了却仍有遗漏”的情况
- 如果项目使用了 Web Components 或 Shadow DOM，这条全局规则对组件内部不会自动生效，需要在组件的
:host或内部style中再次声明
表单控件要单独补一句
在旧版 Safari（≤12）以及部分 Android WebView 环境中，原生 、