应优先引入normalize.css而非通配符重置，因其修复跨浏览器差异并保留语义化默认行为；仅在封装自定义组件时用all: unset局部重置并手动补display。
别用 * { margin: 0; padding: 0; }，它会直接破坏表单控件可用性、可访问性和语义层级；真正该做的是优先引入 normalize.css，只在封装自定义组件时才考虑局部重置。
为什么* { margin: 0; padding: 0; }必须避免
这个写法不是“干净”，是“失控”：
-
input和textarea失去默认内边距，文字紧贴边框，iOS 上select下拉箭头直接消失 -
button:focus的轮廓被清掉，键盘用户完全无法识别当前焦点 -
h1–h6全部退化为1em字号，标题语义层级彻底崩塌 - 强制浏览器为每个 DOM 节点执行通配符匹配，页面节点超 2000 个时，CSSOM 构建明显变慢
-
box-sizing被统一设为content-box，后续写width: 100%; padding: 12px会撑出容器
应该用normalize.css替代全局 Reset
它不归零，而是修复差异、保留有用默认行为：
-
h1–h6仍保持大小关系，只统一margin-top/margin-bottom -
ul、ol保留缩进（用padding-left），但修正了 Firefox/IE 缩进实现不一致的问题 -
input、button在 Chrome/Safari/Edge 中默认尺寸、行高、光标行为更一致 -
code、sub、sup等仍维持语义化排版表现
引入方式极简，且必须放在你自己的 CSS 文件之前：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
哪些场景真需要局部“归零”？用什么重置
仅当你封装完全自定义组件（如 UI 库里的 Button、Card），且明确拒绝任何父级或浏览器默认样式干扰时，才考虑局部重置：
- 用
all: unset清除继承 + 默认样式，但会丢失display，记得手动补上：.my-button { all: unset; display: inline-block; } - 用
all: revert恢复浏览器原生样式（比如让某个button回到系统默认外观） - 避免对
body或html应用all，它会影响滚动条、焦点轮廓、字体抗锯齿等底层行为
如果非要手写 Reset，只动这 5 类就够了
够用、轻量、不易踩坑：
-
body：清除默认margin（Chrome/Firefox 是 8px，IE 是 10px） -
h1–h6、p、blockquote：重置margin，保留font-size和语义 -
ul、ol、li：只设list-style: none，不碰padding -
a：移除text-decoration，但保留color继承逻辑 -
img：设vertical-align: middle，现代浏览器已默认无边框，不用加border: 0
复杂点在于：重置不是越“全”越好，而是越“准”越稳；最容易被忽略的是——normalize.css 必须加载在你所有自定义 CSS 之前，否则它修复的差异会被你后续规则无意覆盖。
