必须显式加上, ::before, ::after { box-sizing: border-box; }，因为无法捕获伪元素，而::before/::after默认content-box会悄悄撑出容器；IE8需用单冒号语法:before, :after兼容。
为什么全局设置 box-sizing: border-box 不能只写 *
因为 *::before 和 *::after 不会被 * 捕获，而伪元素默认仍走 content-box。一旦你用 ::after 做装饰边框、清浮动或 tooltip 箭头，它就会悄悄撑出容器——尤其在绝对定位 + inset 场景下，错位肉眼难查。
必须显式加上：*, *::before, *::after { box-sizing: border-box; }。IE8 不支持双冒号语法，若需兼容，得拆成 *:before, *:after（单冒号）。
哪些元素设了 border-box 反而会坏掉
不是所有元素都适合一刀切：
• input[type="search"] 在 Safari/Chrome 中依赖默认 content-box 对齐内部文字和光标，设了 border-box 可能导致输入框内文字偏移或行高异常
• canvas 容器若需严格控制绘图区域尺寸（比如要求 width: 500px 就是纯 content 区），border-box 会压缩画布本身
• 第三方 UI 库（如 ant-input、el-input__inner）常自带 !important 强制 content-box，你的全局规则会被覆盖，得单独还原：.ant-input *, .el-input__inner { box-sizing: content-box !important; }
全局规则写了却没生效，常见覆盖源
真正生效与否，不看有没有写，而看有没有被干掉：
• 外部 CSS 文件（如 Bootstrap、Element Plus）后加载，直接覆盖你的 * 规则——把重置样式放在所有 <link> 之后
• 内联样式里写了 style="box-sizing: content-box"，优先级高于 *，得用更具体选择器覆盖，比如 input, textarea, select { box-sizing: border-box !important; }
• Vue/React 的 scoped style 或 CSS-in-JS 动态注入，可能隔离了全局规则，需检查 computed styles 面板确认最终值
• 某些组件库的根容器用了 !important，必须用相同或更高权重的选择器反击
border-box 在 Flex/Grid 里是不是就不用管了
不是。Flex item 的 flex-basis 和 Grid item 的固定 width 依然受 box-sizing 影响：
• 两个 width: 50% 的 flex 子项，只要其中一个有 padding 或 border 且没统一 border-box，总宽必超 100%，强制换行
• grid-template-columns: 1fr 1fr 下，加了 padding 后内容不对齐？大概率是父容器或子项的 box-sizing 没对齐
• calc(100% - 20px) 在 border-box 下减的是外部空间，但如果你同时写了 padding: 10px，这 20px 实际已包含在 “100%” 内——计算预期容易翻车
立即学习“前端免费学习笔记（深入）”；
