必须写::before, ::after { box-sizing: border-box; }才真正生效，因box-sizing不继承，伪元素默认content-box，仅设*会漏掉伪元素导致布局溢出。
为什么只写 * 不够用
伪元素（::before 和 ::after）是独立渲染节点，不继承父元素的 box-sizing 值。哪怕你写了 * { box-sizing: border-box; }，.card::before 依然按默认的 content-box 计算——加个 border: 1px 就多占 2px，百分比布局立刻偏移。
必须显式覆盖伪元素的写法
真正生效的写法只有一条，且顺序和位置都关键：
*, *::before, *::after {
box-sizing: border-box;
}
这条规则要放在整个项目 CSS 的最顶部（比如 index.css 或全局 reset 文件开头），否则会被后续加载的第三方样式（如 Ant Design、Element Plus）覆盖。
- 不能只写
*::before, *::after—— 普通元素会漏掉 - 不能写成
html { box-sizing: border-box; }——box-sizing不继承 - 不要用
!important盲加 —— 优先级靠位置，不是靠暴力
哪些地方容易失效
即使写了正确规则，仍可能被绕过：
- 第三方组件内部用了
box-sizing: content-box !important（比如某些旧版.el-input__inner）——得单独覆盖：.el-input__inner { box-sizing: border-box !important; } -
<input type="search">在 Safari 13.1 之前无视border-box，需加前缀或降级处理 - CSS-in-JS 场景（如 styled-components）里，全局样式不自动注入到动态生成的伪元素上，得在主题层或
<style></style>标签里显式声明
怎么确认它真生效了
别信代码写了，要看 DevTools 的 Computed 面板：
- 选中一个用了
::before的元素（比如带 tooltip 的按钮） - 在 Computed 标签页搜
box-sizing - 如果值是
border-box，且旁边width显示的是你写的数值（比如100px），说明生效；如果显示120px（含 padding + border），那就是还在content-box模式
伪元素一旦漏掉，边框和内边距就变成“额外空间”，这种错位在 flex 容器或栅格系统里特别隐蔽，往往只在缩放或换设备时才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
