CSS清除浏览器默认样式（Reset CSS）教程

先说结论：推荐直接使用 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 文件——保持职责分离，便于日后升级。