先说结论：推荐直接使用 normalize.css，无需手动编写重置规则——它能统一跨浏览器差异，同时保留语义化样式，调试成本低且易于维护，适用于绝大多数前端项目。
为什么避免使用 * { margin: 0; padding: 0 } 这类通配符重置
初看似乎简单高效，实则暗藏隐患：它会强制所有元素——包括 fieldset、textarea、input[type="search"]——丢失原生间距和默认行为，导致表单控件布局错乱，可访问性下降。更棘手的是，* 选择器权重较低，容易被后续样式覆盖；例如你设置了 button { margin: 8px }，通配符重置会使其失效。
- 通配符重置会破坏
details、summary等新标签的默认交互样式 - 部分浏览器对
button的line-height和vertical-align存在隐式处理，重置后文字常出现偏上或偏下问题 - 移动端
input[type="number"]的增减按钮、select的下拉箭头可能消失或错位
normalize.css 与 reset.css 的本质区别是什么
normalize.css 侧重于“修复”而非“删除”：保留有用的默认样式（如标题层级、列表缩进、pre 的空白处理），仅修补已知的跨浏览器 bug；而 reset.css（例如 Eric Meyer 版）则采取“清零”策略，将几乎所有样式设为 0 或 inherit，强制开发者从零定义每个元素。
- 若使用 Ant Design、Element Plus 等组件库，
normalize.css更为友好——这些库内部依赖部分原生样式逻辑 - 若开发高度定制的营销页面或设计系统原型，且团队能统一维护基础样式，
reset.css能提供更强控制力 normalize.css对屏幕阅读器、键盘焦点、:focus-visible等可访问性特性更加谨慎，不会随意覆盖outline
引入顺序与加载方式的严格规范
normalize.css（或任何 reset 文件）必须作为 HTML 中第一个 引入，且不能通过 @import 嵌套在其他 CSS 中——否则规则会被后续样式覆盖，表现为 h1 仍然有上下边距、ul 保留圆点、button 存在灰色边框。
- 正确路径示例：
，置于最顶部 - 避免在 JS 入口文件中使用
import './normalize.css'——构建工具可能打乱 CSSOM 构建顺序 - 通过 DevTools → Elements → 任意元素 → Styles 面板检查，确认
margin、padding等属性来源为 normalize.css 且未被划掉
现代项目中需要手动补充的关键重置项
即便使用了 normalize.css，以下三处仍需显式声明，否则布局易出现偏差：
* { box-sizing: border-box }—— 必加项，否则width: 100%+padding会撑破容器img { max-width: 100%; height: auto }—— 防止响应式场景下图片溢出button, input, select, textarea { font: inherit }—— 避免表单控件字体继承异常（尤其 Safari 下select字体变小）
这些补丁应紧跟在 normalize.css 之后声明，不要混入 reset 文件——保持职责分离，便于日后升级。
