伪元素默认使用content-box盒模型，不继承父元素box-sizing设置；content: ""也会生成参与布局的盒子，必须显式声明box-sizing: border-box才能使width包含padding和border。
伪元素默认走 content-box 模型
伪元素 ::before 和 ::after 的盒模型完全独立，不继承父元素的 box-sizing 设置。哪怕父容器写了 box-sizing: border-box，伪元素内部仍按 content-box 计算：你写的 width 只管内容区，padding 和 border 会额外叠加。
常见错误现象包括：
-
width: 100%+padding: 10px→ 实际宽度变成100% + 20px - 用
::after清除浮动后，底部多出几像素空白 - 装饰性边框（如
border: 2px solid #000）导致定位偏移、盖不住图片
content: "" 也会占空间
只要 content 不是 none，哪怕写的是空字符串 content: ""，且 display 是 block 或 inline-block，它就生成一个参与布局的匿名盒子。
这个盒子默认按 content-box 算尺寸，所以：
- 没加
box-sizing: border-box时，padding和border一定撑大总尺寸 - 即使只加了
height: 0和overflow: hidden，padding-top/bottom仍会推高整体高度 - 用
::before做图标前缀点（content: "•"）+ 内边距，容易让文字基线错位
必须显式声明 box-sizing 才生效
伪元素的 box-sizing 不传播、不继承、不联动，每一处都得手动写全。
正确写法示例：
.card::before {
content: "";
display: block;
width: 100%;
padding: 8px;
border: 2px solid #333;
box-sizing: border-box; /* 必须加这一行 */
}
漏掉这行，width: 100% 就不是“占满父容器”，而是“占满父容器 + 左右 padding + 左右 border”。
兼容性注意点：
- IE9+、Chrome、Firefox 支持良好
- 旧版 Safari（≤5.1）不支持伪元素上的
box-sizing，需降级用calc()手动减去尺寸 - 大量使用带
box-sizing的伪元素做装饰（比如每项列表都加::before圆点），建议评估是否真需要——有时背景图或 SVG 更轻量
全局重置也覆盖不到伪元素
只写 * { box-sizing: border-box; } 是无效的。它不会影响 ::before 和 ::after，因为伪元素不是真实 DOM 节点，通配符选择器不自动包含它们。
真正起效的写法必须显式列出：
*, *::before, *::after {
box-sizing: border-box;
}
但即便这样，也不能替代具体伪元素里的单独声明——某些场景下（如第三方库封装的组件、scoped CSS、Shadow DOM）该规则可能被隔离或覆盖，所以关键伪元素仍建议就近写死 box-sizing: border-box。
最容易被忽略的其实是：伪元素的盒模型是“自包含”的，它的尺寸逻辑从不和父元素协商，也不受外部 reset 影响，除非你亲手把它写进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
