HTML如何做CSS Reset_html CSS Reset重置默认样式【保姆级教程】

<p>通配符重置（* { margin: 0; padding: 0; }）是坏主意，因其强制清除所有元素默认间距与样式，破坏表单控件可用性、可访问性及跨浏览器一致性；应优先使用 normalize.css 修复差异并保留语义化默认行为，局部需归零时再用 all: unset 或精简选择器。</p>

直接上结论：别用通配符 * 重置，也别一上来就全量引入 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 的真实好处

它不追求“清空”，而是修复已知跨浏览器差异，同时保留语义化默认行为。比如：

• h1 到 h6 仍保持层级大小关系，只是统一了 margin-top/margin-bottom 值
• ul、ol 保留缩进（用 padding-left），但修正了 IE/Firefox 对缩进实现方式不一致的问题
• code、kbd 仍用等宽字体，sub/sup 仍正确垂直对齐
• 表单控件如 input、button 在各浏览器中默认尺寸、行高、光标行为更一致

引入方式很简单：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

注意：必须放在你自定义 CSS 文件之前加载。

立即学习“前端免费学习笔记（深入）”；

哪些场景真该用局部重置？用什么重置？

当你要封装一个完全自定义的组件（比如 UI 库里的 Button、Card），且不希望任何父级或浏览器默认样式干扰时，才需要真正“归零”：

• 用 all: unset 清除继承 + 默认样式，但会丢失 display，记得手动设：

  .my-button { all: unset; display: inline-block; }

• 用 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 就行，没必要动全局。