直接写 { box-sizing: border-box; }不够用，因为伪元素::before和::after不被匹配，仍按默认content-box计算，导致padding/border撑出布局；正确做法是, ::before, *::after { box-sizing: border-box; }。
为什么直接写 * 不够用
只写 * { box-sizing: border-box; } 会漏掉伪元素，比如 ::before 和 ::after 生成的内容——它们默认仍是 content-box，导致 padding/border 不按预期计算。实际项目里，一个带伪元素的按钮或装饰性图标就可能因此错位。
正确做法是显式包含伪元素：
*,
*::before,
*::after {
box-sizing: border-box;
}
这不是“多此一举”，而是现代 CSS 初始化的标配写法，所有主流 reset 库（如 Normalize.css 的衍生方案）都采用这个模式。
* 配合 box-sizing 的典型副作用
把所有元素强制设为 border-box 后，某些原生控件的行为会变“硬”：
-
<input type="file">的文件选择按钮在部分旧版 Safari 中高度异常 -
<select></select>下拉箭头在 Firefox 中可能被 border 挤压变形 -
<textarea></textarea>的默认 resize 句柄位置偏移
这些不是 bug，而是 border-box 让它们的尺寸计算逻辑更“严格”了。如果遇到，优先检查是否遗漏了 min-width 或 min-height 约束，而不是回退到 content-box。
性能影响比你想象中更实在
* 是浏览器匹配成本最高的选择器之一，尤其在 DOM 节点超 5000 个时，首次渲染延迟可增加 10–20ms。这不是理论值，而是真实 Lighthouse 报告里能抓到的瓶颈。
缓解方式很务实：
- 把
*规则放在 CSS 文件最顶部，避免被后续规则反复覆盖重算 - 不用
*做样式微调（比如* { color: #333; }），它只该干初始化的事 - 大型管理后台类项目，考虑用
html或body代替*做继承控制，比如body { box-sizing: border-box; }再配合inherit，虽不完全等效但更轻量
上线前必须检查的三件事
通配符初始化很容易“写完就忘”，上线后才发现问题：
- 确认调试用的
* { outline: 1px solid red !important; }已彻底删除——哪怕只留一行，都会让所有元素带红边框 - 检查表单元素是否意外丢失了
margin或padding，特别是<label></label>和<input>的垂直对齐 - 验证第三方 UI 组件库（如 Ant Design、Element Plus）是否自带自己的
box-sizing重置，避免双重设置引发冲突
真正麻烦的不是写错，而是改得不干净。通配符一旦生效，就无处不在，排查时得从全局样式表逐行扫，而不是只看局部组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
