必须显式写*, *::before, *::after { box-sizing: border-box; }才真正生效，因box-sizing不继承，伪元素默认content-box，仅*会漏掉伪元素导致布局溢出。
为什么全局设置 * 就不够用
只写 * { box-sizing: border-box; } 看似简洁，但伪元素（如 ::before、::after）不会继承这个声明。一旦你写了 ::before { content: ""; display: block; width: 100%; }，它仍按 content-box 解析，padding 或 border 会撑出父容器，导致布局错位或滚动条意外出现。
真正覆盖全部节点的写法必须显式包含伪元素：
-
*匹配所有元素 -
*::before和*::after覆盖所有伪元素生成的内容 - 三者合起来才能确保动态插入的 DOM、JS 创建的伪元素、CSS-in-JS 注入的样式都生效
box-sizing: border-box 在 Flex/Grid 中是否自动生效
是，但容易误判。Flex 容器的 display: flex 不会重置子项的 box-sizing；Grid 容器同理。子项仍各自按自己的 box-sizing 计算尺寸，只是被父容器的布局规则约束。
常见坑点：
立即学习“前端免费学习笔记（深入）”；
- 一个
flex-item设了flex-basis: 200px，但没设box-sizing: border-box，它的实际占位宽度 = 200px + padding + border，可能超出预期 -
grid-template-columns: 1fr 1fr下，两个 item 都有border: 2px，若仍是content-box，总宽会多出 8px，破坏等分 - 第三方组件（如 Ant Design 的
Card）内部已设box-sizing: border-box，但如果你在外层再套一层带 padding 的容器，且没重置，尺寸会叠加膨胀
旧版 IE 兼容性怎么处理
IE8 支持 box-sizing，但必须加 -ms- 前缀；IE7 及更早版本完全不支持。如果项目仍需兼容 IE7：
- 放弃全局重置，改用显式控制：所有关键容器手动写
width: calc(100% - 20px)补偿 padding - 避免在 IE7 中使用
flex或grid，改用浮动+负 margin 模拟列布局 - 用条件注释加载独立样式表，里面禁用所有
box-sizing声明，防止解析失败或样式失效 - 现代项目基本可忽略 IE7，但若接手老系统，务必检查构建工具是否自动注入前缀（如 Autoprefixer 默认不处理 IE7）
表单控件和 Shadow DOM 里的 box-sizing
原生表单元素（<input>、<textarea></textarea>）在某些浏览器（如旧版 Safari）中不继承 box-sizing，即使父级设了 border-box，它们仍按 content-box 渲染，导致宽度不准。
Shadow DOM 内部样式默认隔离，外部的全局重置对它无效：
- 对表单控件要单独加声明：
input, textarea, select, button { box-sizing: border-box; } - Web Components 中，需在组件内部样式里重复写
* { box-sizing: border-box; }，或通过:host设置根节点 - iframe 里的文档也是独立作用域，需在 iframe 内部 CSS 中再次声明
真正起效的不是“写了一行”，而是确认它在每一个渲染上下文里都存在——这点最容易漏，尤其在微前端或嵌入式场景中。
