通配符仅安全用于归零margin、padding和统一box-sizing；多写会引发布局失控、伪元素错位、特异性失效等问题，正确写法必须置于样式表最顶部且含::before/*::after。
不能用 * 安全地“重置浏览器默认样式”，但可以用它做三件事：归零 margin、归零 padding、统一 box-sizing。再多就踩坑。
为什么只配 margin/padding/box-sizing 三条声明
浏览器对不同元素的默认 margin 和 padding 差异极大——比如 fieldset 在 Chrome 里有 padding: 0.35em 0.625em，Safari 却是 0.75em；h1 的上下边距在各引擎间浮动 ±8px。不处理这些，布局就不可控。
box-sizing: border-box 是为了让 width/height 计算可预测，否则加个 border 或 padding 就撑破容器。
- 别加
font-family：会污染button、select的系统字体灰度和语义权重 - 别加
outline或user-select：直接干掉input:focus焦点环和文本可选性 - 别加
all: unset：某些浏览器会让span变成display: none，不是玩笑
必须显式包含 *::before 和 *::after
伪元素不继承 box-sizing，默认仍是 content-box。而现代布局（比如用 ::before 画三角箭头、用 ::after 清浮动）一旦尺寸计算错位，视觉就崩了——尤其在 Safari 和旧版 Chrome 中。
正确写法只有这一种顺序：
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- 顺序不能换：
*::before必须和*写在同一组规则里，否则会被后续更具体的伪元素样式覆盖 - 不能加父级限定：
.container *不是通配符，是后代选择器，性能更差，且破坏重置意图 - 不要用预处理器
@extend：Sass 中* { @extend %reset; }会打乱特异性计算，导致button的margin意外残留
放错位置等于没写
* 规则权重是 (0,0,0,0)，它只在 CSS 文件最顶部生效。一旦你把它写在 .card { margin: 1rem; } 后面，那 .card 的 margin 就根本不会被归零——不是没匹配，而是被覆盖了。
- ✅ 正确：整个样式表第一个规则就是
*块 - ❌ 错误：
body * { ... }或@import后再写* - ⚠️ 警惕 DevTools 临时调试代码：
* { outline: 1px solid red !important; }上线前必须删，否则覆盖所有:focus状态
真正要“清除浏览器默认样式”，normalize.css 才是正解——它不粗暴归零，而是修正差异。而 * 唯一合理的作用，就是帮你把盒模型和基础间距拉到同一起跑线，仅此而已。多写一行，就多一分失控风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
