<p>只设 { box-sizing: border-box }不够，因为::before和::after伪元素不继承该设置，默认仍为content-box，必须显式声明::before, *::after { box-sizing: border-box }才能统一盒模型。</p>
直接用 * 和伪元素统一 box-sizing 就能解决绝大多数盒模型不一致问题，不需要引入整套 reset.css。
为什么只设 * { box-sizing: border-box } 不够
IE6–7 默认用怪异盒模型（border-box），现代浏览器默认是标准盒模型（content-box）。如果只写 * { box-sizing: border-box }，::before 和 ::after 伪元素仍走默认值，而它们常被用来画三角、装饰边框或做布局辅助——一旦尺寸计算错位，视觉就崩了。
-
*::before, *::after必须显式包含，否则伪元素在 Safari 或旧版 Chrome 中可能意外撑开容器 - 第三方 UI 库（如 Ant Design）通常只作用于自己的 class，不会覆盖你全局写的
*::after，所以必须一起写 - 某些表单控件（比如
<input type="file">）在 Safari 中对继承行为不稳定，靠通配符也不保险，得额外补一句input, textarea, select, button { box-sizing: border-box; }
box-sizing: border-box 在 flex/grid 布局里还重要吗
重要。flex 或 grid 只控制容器级排列逻辑，子元素内部尺寸仍由自身 box-sizing 决定。比如一个 flex: 1 的卡片，若它是 content-box 且带 padding: 16px，内容区宽度 = 容器分配宽 − 32px；如果是 border-box，内容区就刚好填满分配宽。
- 响应式断点切换时，
content-box元素容易因 padding/border 突然溢出，触发横向滚动条 - 动态插入内容（比如 JS 插入一段带内边距的
<div>）后，布局错位往往就源于没统一 <code>box-sizing - 即使用了 CSS-in-JS 或 Shadow DOM，只要样式未隔离，全局重置依然生效；Shadow DOM 内需单独加规则
- 别把
normalize.css当成“不用重置”的理由——它不管盒模型，这点必须手动补 - 如果你项目已用
normalize.css，直接在它后面追加这三行即可：*, *::before, *::after { box-sizing: border-box; } - 某些老项目用的是旧版
normalize.css（v3.x 之前），它甚至没声明 HTML5 新标签的display，这种情况下建议升级或搭配轻量 reset 片段
和 normalize.css 混用时要注意什么
normalize.css 本身不设 box-sizing，它只修语义和渲染差异（比如 sub 基线、audio 显示），所以你仍得自己加 box-sizing 规则。而且它的优先级通常低于你的自定义 CSS，只要放在 normalize.css 后面载入就行。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的不是怎么写那三行代码，而是后续维护中：别人加了个 .legacy-widget { box-sizing: content-box !important; }，或者某插件 CSS 里漏写了伪元素，结果只在 Safari 上出问题，还不好复现。
