怎样使用CSS清除浏览器默认样式（Reset CSS）？
作者：袖梨
2026-07-16
应直接使用 normalize.css 而非通配符重置，因其修正浏览器差异而不破坏语义与可访问性；需在 HTML head 中首个 link 加载，并补充 box-sizing、img 和表单控件字体三处关键重置。
直接用 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 中第一个 <link>，且不能用 @import 嵌套在其他 CSS 里——否则规则会被后续样式覆盖，现象就是 h1 还有上下边距、ul 仍有圆点、button 保留灰色边框。
立即学习“前端免费学习笔记（深入）”；
- 正确路径示例：
<link rel="stylesheet" href="/css/normalize.css">，放在<head>最顶部 - 避免
import './normalize.css'放在 JS 入口文件里——构建工具可能打乱 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 文件里——保持职责分离，方便升级。
