HTML CSS Reset重置默认样式保姆级教程

先说结论：不建议使用通配符 * 执行全量重置，也不应直接采用 Eric Meyer 的完整 Reset 方案。推荐的方案是优先选用 normalize.css，只有在局部需要“归零”时才使用 all: unset 或精简后的选择器。

为何 * { margin: 0; padding: 0; } 并不理想

这一写法虽然看上去简单直接，但实质上会把所有元素的默认间距全部抹除，连带那些你并未意识到的、依赖默认样式的部分也被一并清除，从而引发一系列问题：

• textarea、input[type="text"] 的默认内边距被移除，导致文字紧贴边框，外观丑陋且操作困难，键盘用户可能难以判断焦点位置
• button 会丢失浏览器原生的 focus outline 以及可访问性相关的样式，视觉焦点变得不可控
• select、details 等控件在 Safari 或 Edge 中可能渲染异常，甚至无法正常点击
• 性能方面同样不容忽视：* 规则强制浏览器为每一个 DOM 节点进行样式匹配，当页面节点数量较大时，性能开销会明显增加

选择 normalize.css 而非 Reset 的实际优势

normalize.css 并不追求“清空一切”，而是专注于修复已知的跨浏览器差异，同时保留语义化的默认行为。举例说明：

• h1 至 h6 仍保持层级大小关系，仅统一了 margin-top 和 margin-bottom 的值，避免标题突然变大或间距异常
• ul、ol 保留缩进（通过 padding-left 实现），同时修正了 IE 与 Firefox 在缩进实现方式上不一致的问题
• code、kbd 仍然使用等宽字体，sub、sup 也能正确保持垂直对齐
• input、button 等表单控件在各浏览器中的默认尺寸、行高、光标行为表现更加一致，无需额外修复

引入方式很简单：在前端项目里通过 CDN 加载 normalize.css，且必须将其放在你自己编写的自定义 CSS 文件之前加载。

哪些情况适合使用局部重置？具体如何操作？

当你需要封装一个完全自定义的组件（例如 UI 库中的 Button、Card），且不希望渲染时受到任何父级样式或浏览器默认样式的干扰，此时才有必要真正执行一次“归零”：

• 使用 all: unset 清除继承样式及默认样式，但需注意它会丢失 display 属性，因此必须手动重新设置
• 使用 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: none 与 color: inherit，避免默认的蓝色链接样式
• img：设置 vertical-align: middle 和 border: 0，解决图片底部留白的老问题

以上规则加起来不足 20 行 CSS，比全量 Reset 更可控，也比使用 * 通配符更精准。关键在于明白重置只是手段而非目的，重点是理解哪些默认样式是“有用的”、哪些是“干扰的”。例如 margin-collapse 导致的顶部空白，根源往往是 h1 的 margin-top，而非 body 的 margin——此时只需调整 h1 即可，完全没必要改动全局样式。