通配符重置 * { margin: 0; padding: 0; } 必须避免，因它破坏表单控件内边距、焦点轮廓、跨浏览器渲染一致性，且强制浏览器为每个DOM节点匹配样式，显著拖慢CSSOM构建；应优先使用normalize.css修复差异、保留语义化默认行为。
别用 * { margin: 0; padding: 0; }，它会破坏表单控件、可访问性样式和跨浏览器一致性；优先引入 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），但修正了 Firefox/IE 对缩进实现方式的不一致 -
code、kbd仍用等宽字体，sub/sup垂直对齐正常 -
input、button在各浏览器中默认尺寸、行高、光标行为更一致
引入方式极简，且必须放在自定义 CSS 之前：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
哪些场景真该局部重置？用什么重置？
仅当你封装完全自定义组件（如 UI 库里的 Button、Card），且明确拒绝任何父级或浏览器默认样式干扰时，才考虑局部归零：
- 用
all: unset清除继承 + 默认样式，但会丢失display，记得手动设：.my-button { all: unset; display: inline-block; } - 用
all: revert恢复浏览器默认（例如让某个button回到原生样式） - 绝对不要对
body或html应用all，它会影响滚动条、焦点轮廓等底层行为
如果非要手写重置，只动这 5 类就够了
够用、轻量、不易踩坑：
-
body：清除默认margin（Chrome/Firefox 是 8px，IE 是 10px） -
h1–h6、p、blockquote：重置margin，保留font-size和语义 -
ul、ol：仅设list-style: none，不碰padding -
a：移除text-decoration，但保留color继承逻辑 -
img：设vertical-align: middle，不加border: 0（现代浏览器已默认无边框）
真正容易被忽略的是：重置不是一劳永逸的动作，而是持续判断的过程——每次新增一个第三方组件、每次接入新浏览器测试环境，都要重新确认它的样式是否被 normalize.css 适配，还是需要你用 all: unset 主动隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
