伪元素::before默认不继承父元素box-sizing，始终按content-box计算尺寸；必须显式声明::before, ::after { box-sizing: border-box; }或采用html { box-sizing: border-box; } + , ::before, *::after { box-sizing: inherit; }才能确保统一。
伪元素 ::before 默认不继承 box-sizing
父元素写了 box-sizing: border-box，但 ::before 依然按 content-box 计算尺寸——它根本不会继承，浏览器给它的默认值就是 content-box。哪怕父元素设了全局重置，只要没单独写 ::before 选择器，这个伪元素就“自由发挥”：你给它 width: 100%、padding: 8px、border: 2px solid #000，最终宽度就是 100% + 16px + 4px，直接撑破容器。
content: "" 也会参与布局计算
很多人以为 content: "" 就是“空的、不占空间”，其实只要 display 不是 none（比如用了 block 或 inline-block），它就是一个真实参与盒模型计算的匿名盒子。常见错误包括：
- 只写
.card::before { content: ""; display: block; width: 100%; padding: 10px; }，结果卡片变宽或换行 - 用
::before做装饰边框时，加了border却没设box-sizing，导致整体高度多出2 × border-width - 在 flex 容器里用伪元素撑高，却忘了父容器
align-items: stretch会把伪元素高度拉满，进一步放大错位
第三方样式或旧版 Safari 可能让问题更隐蔽
某些 UI 库（如 Element Plus）对 input、button 强制加了 box-sizing: content-box !important；而 Safari ≤12.1 和部分 Android WebView 对 *::before 选择器支持不全，即使你写了全局规则，伪元素仍可能 fallback 到 content-box。验证方法只有一个：
打开 DevTools → 找到目标伪元素 → 切到「Computed」面板 → 直接看 box-sizing 的值是不是 border-box。不是？那就说明规则没生效，要么漏写了选择器，要么被更高优先级样式覆盖了。
正确写法必须显式声明且覆盖所有场景
最稳妥的初始化写法是这两行，放在 CSS 最顶部：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
这样既避免 * 选择器优先级过高压垮第三方样式，又确保伪元素能可靠继承。如果项目已在线上运行、不敢动全局，至少补上：
*::before, *::after { box-sizing: border-box; }
再针对高频出问题的组件（如 .card::before、.dropdown::after）单独加固。最容易被忽略的是：哪怕伪元素只用来画个三角箭头或分隔线，只要它有 border 或 padding，就必须带 box-sizing: border-box——否则它永远在悄悄破坏布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
