必须优先引入normalize.css而非*{margin:0;padding:0;}，因其修复浏览器差异、保留语义化默认样式，而通配符重置会破坏表单控件、标题层级、可访问性及性能。
别用 * { 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 不是可选项，是现代 HTML 文档结构的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
