<p>直接用 * { margin: 0; padding: 0 } 不行，因其破坏表单控件默认内边距与行高、重置 box-sizing 影响现代布局、清除 focus 轮廓损害可访问性，且抹平 font 继承与 vertical-align 导致排版错乱。</p>
为什么直接用 * { margin: 0; padding: 0 } 不行
这个写法看着省事，但实际会破坏表单控件、button、input、textarea 的默认内边距和行高，导致文字贴边、点击区域变小、iOS 上 select 下拉箭头消失。更严重的是，它重置了所有元素的 box-sizing，而现代布局依赖 box-sizing: border-box，盲目清空会让后续尺寸计算反直觉。
无序列表：
立即学习“前端免费学习笔记（深入）”；
- 不重置
box-sizing→ 后续写width: 100%+padding会撑出父容器 - 抹平
font相关继承 →small、h1等字号全变一样 - 干掉
vertical-align默认值 → 图片和行内元素基线错乱 - 影响可访问性 →
:focus轮廓、outline被一并清除
CSS Reset 和 Normalize.css 的本质区别
reset.css 是“归零思维”：把所有浏览器默认样式暴力设为统一基础值（比如所有标题 font-size 都是 1em），等于从一张白纸开始画；normalize.css 是“校准思维”：保留有用的默认行为（如标题层级、audio 控件样式、sub/sup 垂直偏移），只修复跨浏览器不一致的地方（比如 html 字体继承、button 光标、pre 换行处理）。
无序列表：
立即学习“前端免费学习笔记（深入）”；
- 用
reset→ 你得自己定义所有标题、列表、表单的样式，否则页面看起来“没样式” - 用
normalize→ 页面至少有基本可读性，适合快速启动项目或维护已有样式体系 -
normalize对flex、grid、custom properties更友好，不会干扰现代布局逻辑
如何最小化引入 normalize.css 并避免污染
别直接 @import 整个文件——它包含大量你用不到的规则（比如对 ruby、mark 的处理）。真正需要的只是前 200 行左右的核心校准部分。推荐做法是复制官方 latest/normalize.css 中从 /* Document */ 到 /* Links */ 前的部分，粘贴进你项目的 base.css 开头。
无序列表：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
/* Accessibility */以下的区块（除非你明确需要svg或math样式） - 检查是否已有
*, *::before, *::after { box-sizing: border-box; }，有就不用重复加 - 如果用了 CSS-in-JS（如 Emotion），别在全局注入
normalize，改用Global组件包裹，避免 SSR 时漏掉 - Webpack/Vite 用户注意：
normalize.css里有@charset "utf-8"，放在@import第一行才有效，否则可能触发编码警告
哪些样式不该被“清”，必须手动保留
有些默认样式不是 bug，而是浏览器对语义 HTML 的合理表达。比如 blockquote 的左竖线、hr 的浅灰分割线、details 的箭头、summary 的加粗——它们自带语义暗示，删了反而降低可读性。还有 button:focus 的轮廓，虽然丑，但对键盘用户是刚需。
无序列表：
立即学习“前端免费学习笔记（深入）”；
- 别碰
button:focus和a:focus的outline，改用outline-offset微调即可 -
pre和code的white-space和font-family保持原样，否则代码块换行错乱 -
table的border-collapse: collapse是合理默认，别用* { border: 0 }误伤 - 移动端
input[type="number"]的上下箭头、input[type="date"]的日历图标，属于平台特性，清除后无法还原
真正难的不是“清”，是判断哪部分该留、哪部分该校准、哪部分该重写。Normalize 提供的是起点，不是终点；Reset 给你控制权，也同时交出了责任。选哪个不重要，重要的是别让“清样式”变成“清脑子”。
