不建议用*{margin:0;padding:0;}，因其会破坏表单控件可用性、抹平语义层级、拖慢渲染性能；应优先引入normalize.css，局部需“归零”时再用all:unset或精简选择器。
别用 * { margin: 0; padding: 0; } 全局重置，它会破坏表单控件可用性、抹平语义层级、拖慢渲染性能；真正该做的是：优先引入 normalize.css，局部需要“归零”时再用 all: unset 或精简选择器。
为什么 * { margin: 0; padding: 0; } 是危险操作
这个写法看似干净，实则埋雷：
-
input、textarea失去默认内边距，文字紧贴边框，iOS 上select下拉箭头消失 -
button的:focus轮廓被清掉，键盘用户无法识别当前焦点 -
h1–h6字号全变成1em，标题层级语义崩塌 -
box-sizing被强制设为content-box，后续写width: 100%; padding: 12px会撑出容器 - 浏览器对每个 DOM 节点都执行一次通配符匹配，页面节点超 2000 个时样式计算明显变慢
应该用 normalize.css 替代 Reset
它不追求“清空”，而是修复已知跨浏览器差异，同时保留有用默认行为：
-
h1–h6仍保持大小关系，只统一margin-top/margin-bottom -
ul、ol保留缩进（用padding-left），但修正了 Firefox/IE 缩进实现不一致的问题 -
input、button在 Chrome/Safari/Edge 中默认尺寸、行高、光标行为更一致 -
code、sub、sup等仍维持语义化排版表现
引入方式很简单，在 中最顶部加载：
<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 -
img：设vertical-align: middle+border: 0 -
input、button、select、textarea：统一font-family和font-size，不重置padding或line-height
复杂点在于：重置不是“越彻底越好”，而是“刚好挡住浏览器差异，又不伤语义和可访问性”。很多人在项目中期才发现 textarea 没内边距、button 键盘焦点不可见，那时再改就牵一发而动全身了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
