是的，box-sizing: border-box 默认不作用于伪元素，必须显式设置；通配符需写成 , ::before, *::after { box-sizing: border-box; } 才生效。
box-sizing: border-box 是否影响 ::before 和 ::after？
是的，box-sizing: border-box 默认**不作用于伪元素**——除非你显式设置。很多人以为通配符 * { box-sizing: border-box; } 能“一网打尽”，但浏览器规范里，伪元素（::before、::after）**不继承** box-sizing，哪怕父元素设了，它们仍按默认的 content-box 计算尺寸。
常见错误现象：
你给按钮加了 ::after 做装饰性边框或图标，又设了 width: 100px; padding: 8px; border: 2px solid;，结果伪元素撑出意外宽度，和主内容错位——问题就出在它没被 border-box 管住。
- 必须单独为伪元素声明：
.btn::before { box-sizing: border-box; } - 通配符写法要补全：
* , *::before, *::after { box-sizing: border-box; }（注意逗号分隔） - 伪元素若用作视觉装饰（如分割线、角标），且设置了
width/height，务必确认它是否参与布局：设position: absolute可让它脱离文档流，此时box-sizing影响变小，但尺寸逻辑依然存在
伪元素的盒模型是否真实参与布局？
取决于它的 display 和 position。伪元素本质是“虚拟盒子”，天生有完整的四层结构（content/padding/border/margin），但是否占用空间、是否触发外边距折叠、是否响应 width，全看渲染上下文：
-
display: block或inline-block的伪元素：会生成真实盒，参与正常流，margin可能折叠，padding和border影响尺寸 -
position: absolute或fixed：脱离文档流，不触发 margin 折叠，但width/height/padding/border仍按盒模型计算（只是不挤别人） -
display: contents：伪元素直接“消失”于盒模型中（不生成盒子），此时box-sizing完全无效
为什么给伪元素设 width + padding 容易翻车？
因为多数人忘了它默认是 content-box，而主元素用了 border-box，造成尺寸逻辑割裂。比如：
立即学习“前端免费学习笔记（深入）”；
.card::before {
content: "";
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}这段代码在 content-box 下，实际宽度 = 100% + 20px + 2px → 溢出父容器；若加 box-sizing: border-box，才真正让 width: 100% 包含内边距和边框。
- 调试技巧：Chrome DevTools 中选中伪元素 → Computed 面板 → 查看
box-sizing实际值，别猜 - 安全写法：所有需精确控宽的伪元素，统一加
box-sizing: border-box，不依赖继承 - 特别注意：
border-radius和box-shadow渲染也受box-sizing影响——border-box下圆角基于“总宽高”裁切，更可控
兼容性与性能提醒
box-sizing 在 IE8+、所有现代浏览器中均原生支持，无需前缀；伪元素的 box-sizing 行为从 CSS2.1 就已明确，不存在兼容断层。但要注意：
- 旧版 Safari（≤5.1）对
*::before, *::after的通配符支持不稳定，建议单独写选择器 - 大量使用带
padding/border的伪元素（尤其动画中），可能触发频繁重排——优先考虑用background-image或 SVG 替代复杂装饰盒 - 伪元素若设
margin-top且父元素无border/padding，仍会发生外边距穿透（即使它自己是border-box），根源是块级上下文规则，不是盒模型本身
最常被忽略的一点：伪元素不是“语法糖”，它是真实参与渲染管线的盒子。你给它设 width，浏览器就得算尺寸；你没管它的 box-sizing，它就按老规矩自作主张——而这个“老规矩”，往往和你的主元素不一致。
