不能只用 * { margin: 0; padding: 0 }，因其会破坏表单控件样式、清除可访问性焦点轮廓、强制 content-box 导致尺寸失控、重置语义元素字体并中断继承链。
直接用 * { margin: 0; padding: 0 } 是最危险的“快速”做法——它看似省事，实则会破坏表单控件、抹平可访问性焦点轮廓、打乱现代布局所需的 box-sizing 和 font 继承，最终让调试成本远超收益。
为什么不能只靠 * 通配符重置
这个写法在视觉上“清空了边距”，但副作用极隐蔽：
-
input、select、button失去默认内边距和行高 → 文字贴边、iOS 下拉箭头消失、点击热区收缩 - 所有元素
box-sizing被强制设为content-box→ 后续加padding或border时尺寸失控 -
small、h1、em等语义元素字号全归零 → 语义丢失，字体继承链断裂 -
:focus的outline一并清除 → 键盘用户无法感知焦点位置，违反 WCAG 可访问性要求
引入 Normalize.css 的最小有效方式
Normalize.css 不是“重置”，而是“校准”：修复浏览器差异，保留合理默认。你不需要整份文件。
- 只复制官方
latest/normalize.css中从/* Document */到/* Links */前的约 200 行核心部分 - 删掉
/* Accessibility */之后的所有区块（除非你明确需要svg或math样式） - 确保它位于你项目
base.css的最顶部，且在任何自定义样式之前加载 - 检查是否已有
*, *::before, *::after { box-sizing: border-box; }，有就别重复加
Webpack/Vite 用户注意：@charset "utf-8" 必须放在 @import 第一行，否则可能触发编码警告。
局部清除默认样式的正确姿势
全局重置代价高，多数时候你真正需要的是精准控制某一块：
- 对某个组件容器用
all: unset→ 清除继承 + 默认样式，适合封装强隔离的 UI 组件 - 对原生按钮恢复默认行为用
button { all: revert }→ 比手动重写border、background、cursor更可靠 - 清除列表样式不要只写
ul { list-style: none }，补上ul, ol { margin: 0; padding: 0; list-style: none; }，避免旧版 Safari 忽略伪元素重置 - 重置表单控件时，
font: inherit必须显式声明，否则 Chrome 会继承body字体但丢掉line-height
真正的“快速”不在于删得多，而在于删得准——浏览器默认样式不是 bug，是语义 HTML 的合理表达；清除动作本身，就是一次有意识的设计决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
