直接用 reset.css 让表单更难调，因其粗暴清零所有 margin/padding/border，抹平浏览器默认表单样式，需手动补全 border-radius、line-height 等；而 normalize.css 通过修复差异实现归一化，保留语义与交互。
为什么直接用 reset.css 反而让表单更难调？
因为传统 reset.css（比如 Eric Meyer 的版本）粗暴地把所有元素的 margin、padding、border 全设为 0，连 input、button、select 也不放过。结果是：浏览器默认的表单控件样式被抹平，你得从零写 border-radius、box-shadow、line-height —— 这些本该由浏览器合理提供的基础体验，反而要你自己补。
常见错误现象：textarea 在 Chrome 里有默认内边距和字体大小，在 Safari 里缩成一团；button 点击后失去焦点样式，但你根本没动过 :focus。
- 重置不是清零，而是「归一」：保留有用的默认行为（如表单控件可交互性、标题层级语义），只消除不一致
-
reset.css适合极简 UI 框架或需要完全自定义控件的场景，日常项目慎用 - 如果用了 reset 却没补全表单样式，
appearance: none后容易漏掉cursor: pointer或user-select: none等细节
normalize.css 真正解决的是哪些兼容性问题？
normalize.css 不是清空样式，而是用 CSS 修复浏览器间差异：比如统一 h1～h6 的 font-size 缩放比例，修正 audio 和 video 在 IE9+ 的默认显示，让 sub 和 sup 在各浏览器中保持相对基线位置一致。
它还处理了容易被忽略的底层行为：button 默认有 vertical-align: middle，但某些旧版 Firefox 会当 baseline 处理；pre 在 Safari 中默认换行行为与 Chrome 不同 —— normalize.css 都做了针对性 patch。
立即学习“前端免费学习笔记（深入）”；
- 对
font-family，它不强行指定，而是保留各平台默认字体栈（如 macOS 用-apple-system，Windows 用"Segoe UI"） - 对
html根元素，它设置line-height: 1.15（而非1），避免在 Firefox 中文本渲染发虚 - 它不修改
display值，所以article、section等语义标签仍保持块级，不影响可访问性
自己写轻量 Reset 时，哪几条规则不能少？
如果你不想引入整个 normalize.css，又不愿用暴力 reset，可以只加这几行关键修复：
/* 修复表单控件默认尺寸和对齐 */
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/* 修复 img 垂直对齐（老版 IE/Edge 默认 baseline，导致下方留白） */
img { vertical-align: middle; }
/* 修复 pre 默认换行策略 */
pre { white-space: pre-wrap; }
/* 修复 focus outline 在高对比度模式下不可见的问题 */
*:focus:not(:focus-visible) { outline: 0; }
-
font-family: inherit是关键：否则input在 Safari 中可能用Times显示，而页面正文是system-ui -
line-height: 1.15比1更安全，避免文字被裁切（尤其配合font-size: 1rem时） - 不要写
* { box-sizing: border-box; }放在最前——它会影响svg内嵌text的布局计算，出问题很难排查
PostCSS 插件 postcss-normalize 要怎么配才不踩坑？
这个插件会自动注入 normalize.css 的对应规则，但默认行为容易误伤：它会把 normalize.css 里的所有规则都打进 bundle，包括你根本不用的 math、details 等新标签支持。
正确做法是按需启用模块：
module.exports = {
plugins: [
require('postcss-normalize')({
allowDuplicates: false,
// 只加载常用模块，跳过实验性或低使用率的
features: ['general', 'forms', 'tables', 'links']
})
]
};
- 如果项目不支持 IE，可关掉
legacy模块，减少约 2KB 体积 - 开启
allowDuplicates: false，避免和你手写的重置规则冲突（比如你写了img { max-width: 100%; }，插件又重复注入） - 注意它不会处理
@layer，若你用 CSS 层叠控制优先级，得手动把 normalize 规则包进@layer base
真正麻烦的从来不是选 reset 还是 normalize，而是忘了表单控件在不同系统下的光标形状、禁用态灰度、键盘导航焦点顺序这些细节 —— 它们不会报错，但用户一上手就卡住。
