伪元素默认不继承box-sizing，即使父元素或通配符设置了border-box，::before和::after仍按content-box计算尺寸；必须显式声明::before, ::after { box-sizing: border-box; }才能生效。
伪元素默认不继承 box-sizing
你给父元素设了 box-sizing: border-box，但 ::before 和 ::after 依然按 content-box 计算尺寸——这是规范行为，不是 bug。伪元素天生不继承该属性，哪怕父元素、甚至全局通配符 * { box-sizing: border-box } 都写了，它们照样“自由发挥”。
- 常见翻车现场：用
::after做装饰边框或遮罩层，设了width: 100%; padding: 12px;，结果撑出父容器——因为实际宽度 = 100% + 24px（padding）+ border 宽度 - 调试方法：在 Chrome DevTools 中选中伪元素，在 “Computed” 面板里搜
box-sizing，看值是不是content-box - 安全写法必须显式声明：
*::before, *::after { box-sizing: border-box; }，注意逗号分隔，不能省略
伪元素是否参与布局决定 box-sizing 是否“可见”
box-sizing 对伪元素始终生效，但它是否影响页面布局，取决于伪元素的 display 和 position。
-
display: block或inline-block的伪元素：生成真实盒子，box-sizing直接控制其尺寸逻辑，漏设就容易溢出 -
position: absolute或fixed的伪元素：脱离文档流，不挤占空间，但width/padding/border仍按盒模型计算——只是“自己算清楚，不给别人添乱” -
display: contents的伪元素：不生成盒子，box-sizing完全无效
为什么伪元素加了 padding 还是撑开？
不是 box-sizing 没起作用，而是你没意识到它只管“怎么算宽高”，不管“padding 是否占空间”。即使设了 border-box，padding 依然存在、依然撑开内容区、依然影响背景绘制和子元素定位。
- 例如：
.card::before { content: ""; width: 100%; padding: 20px; box-sizing: border-box; }—— 它的总宽确实是 100%，但内部内容区只剩 60px，若里面放文字或图标，会明显被压缩 -
background-position始终以 content box 左上角为原点，和box-sizing无关；想让背景填满 padding 区，得靠background-clip - 伪元素设了
margin？别指望box-sizing管它——margin永远是外部的，不参与任何盒模型计算
全局重置时最容易漏掉的写法
很多人写 * { box-sizing: border-box; } 就以为万事大吉，结果上线后某些图标、装饰线、清除浮动的伪元素突然错位。问题就在没覆盖伪元素。
- 正确写法必须带逗号分隔：
* , *::before, *::after { box-sizing: border-box; } - 不要写成
* { box-sizing: border-box; } *::before, *::after { ... }—— 后者优先级低，可能被第三方 CSS 覆盖 - 老项目切换时，尤其要注意 Select2、Flatpickr 等库的内部伪元素，它们常显式设回
content-box，得单独覆盖
真正麻烦的不是写错，是写对了却忘了伪元素也有自己的盒模型逻辑——它不像普通元素那样“听话”，得盯着它每一步怎么算尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
