直接用 normalize.css 而非通配符重置或老式 Reset，它校准跨浏览器差异、保留语义与可访问性；必须置于所有样式最前，按钮等表单控件需额外补 margin: 0、box-sizing: border-box 等规则。
直接用 normalize.css，而不是手写通配符重置或盲目套用老式 Reset。它不“清零”，而是校准差异，保留语义和可访问性，是当前最稳妥、最轻量的起点。
优先引入 normalize.css，且必须放最前
它不是锦上添花，而是基础依赖。加载顺序决定效果：
- 在 HTML 的
<head>中，第一个 加载normalize.min.css（CDN 或本地文件） - 所有自定义 CSS 文件、
<style>标签都必须跟在它后面 - 不要复制内容进自己的 CSS 文件末尾——规则顺序失效，button:focus、input 尺寸等会回退到 UA 样式
按钮这类表单控件要单独补丁
normalize.css 修复了基础继承和盒模型，但 button 的视觉表现仍不一致。必须显式加这几条：
-
button { margin: 0; }—— Safari 默认加 0.5em，其他浏览器常为 0 -
button { box-sizing: border-box; }—— Safari 15+ 和部分 Android WebView 不继承通配符，必须单独写 -
button { vertical-align: middle; line-height: normal; }—— 避免和文字基线错位，看起来像“多出间距” - 如需完全自定义外观，再加
-webkit-appearance: none; -moz-appearance: none; appearance: none;
别碰通配符重置 * { margin: 0; padding: 0; }
它看似省事，实则破坏体验和性能：
立即学习“前端免费学习笔记（深入）”；
- textarea 文字贴边、input 清除按钮消失、button 热区变小、focus outline 被抹掉
- 浏览器要为每个 DOM 节点匹配该规则，节点多时拖慢样式计算
- 真正需要重置的只有几类：body（清默认 margin）、h1–h6/p（调 margin）、ul/ol（去 list-style）、a（去下划线）、img（设 vertical-align）
后续微调比“一步归零”更可靠
重置不是终点，而是起点。每次加新组件或测试新浏览器，都要验证：
- 表单控件是否仍有 focus outline（键盘用户必需）
- flex 容器里的 button 是否因 min-width: min-content 撑开（Safari iOS 常见，加
min-width: 0可解） - 第三方 UI 库是否与 normalize 冲突（比如某些库自带 reset，混用会导致样式叠加异常）
