HTML怎么做CSS Reset_html CSS Reset重置默认样式【保姆级教程】-html教程-PHP中文网

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

html怎么做css reset_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 的真实好处

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

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

引入方式很简单：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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