伪元素默认不继承box-sizing，必须显式设置::before,::after{box-sizing:border-box}且置于css最顶部；否则伪元素仍按content-box计算尺寸，导致布局错位。
伪元素默认不继承 box-sizing
你写了 * { box-sizing: border-box; }，但 ::before 和 ::after 依然按 content-box 算尺寸——这不是 bug，是规范行为。伪元素是独立渲染节点，box-sizing 不会从父元素继承，哪怕父级、重置样式、全局通配符全设了也没用。
漏掉伪元素会导致布局悄悄错位
常见翻车场景：用 ::after 做装饰边框、遮罩层或清浮动，设了 width: 100%; padding: 12px;，结果撑出容器。因为实际宽度 = 100% + 24px（padding）+ border 宽度，而你根本没意识到它在“偷偷加”。
- flex 或 grid 容器里尤其隐蔽：子项看似对齐，缩放后突然错一像素
- 百分比布局中，伪元素溢出常只在高 DPI 屏或 Safari 下暴露
-
background-position始终以 content box 为原点，和 box-sizing 无关——别误以为设了border-box就能填满 padding 区
必须用逗号分隔的显式写法
真正生效的规则只有一条：*, *::before, *::after { box-sizing: border-box; }。这条必须放在所有 CSS 的最顶部（比如 reset.css 开头），否则会被 Ant Design、Element Plus 等第三方样式覆盖。
- 不能只写
*::before, *::after——普通元素就漏掉了 - 不能写成
html { box-sizing: border-box; }——box-sizing 不继承 - 别滥用
!important——优先级靠位置，不是靠暴力
怎么确认它真起作用了
别信代码写了，要看 DevTools 的 Computed 面板：
- 选中一个带
::before的元素（比如 tooltip 按钮） - 在 Computed 标签页搜
box-sizing - 如果值是
border-box，且旁边width显示的是你写的数值（如100px），说明生效；如果显示120px（含 padding + border），那就是还在content-box模式
伪元素一旦漏掉，padding 和 border 就变成“额外空间”，这种错位在动态渲染或 CSS-in-JS 场景里最难排查——比如 styled-components 生成的伪元素，全局样式根本不会自动注入进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
