<p>不能直接用 * { margin: 0; padding: 0 }，因其会破坏表单控件内置间距、details/summary交互、input[type="number"]增减按钮，并使焦点outline等可访问性样式失效。</p>
别用 * 选择器暴力清零，它会破坏表单控件间距、details/summary 交互、input[type="number"] 增减按钮，还让可访问性（如焦点 outline）失效。
为什么 * { margin: 0; padding: 0 } 是危险操作
这个写法看似省事，实际在真实项目里埋了三类坑：
-
button、textarea、select会丢失浏览器内置的垂直对齐和内边距，文字常贴顶或偏下，点击热区变小 -
fieldset的默认外边距归零后，内部legend渲染错位；details展开/折叠动画直接消失 -
* { all: unset }在旧版 Safari 和 IE 中行为不一致，且all会重置display，导致img、canvas变成inline而换行
现代项目该用 normalize.css 还是 the-new-css-reset
选哪个取决于你是否需要“修”还是“删”：
- 用
normalize.css：保留标题层级、列表缩进、pre的空白处理、:focusoutline，适合接入 Ant Design / Element Plus 等组件库的项目 - 用
the-new-css-reset：依赖:where()+all: unset+display: revert，只重置非关键元素（自动排除img、svg、video），体积小、特异性低，适合定制化强的设计系统 - 两者都必须放在
<head>中第一个<link>，不能用@import嵌套，否则规则被后续样式覆盖
即使用了重置，这三处仍必须手动补
所有主流重置方案都不包含它们，漏掉就会破布局：
立即学习“前端免费学习笔记（深入）”；
-
* { box-sizing: border-box }或更安全的*, *::before, *::after { box-sizing: border-box }—— 否则width: 100%+padding必然撑破容器 -
img { max-width: 100%; height: auto }—— 防止响应式场景下图片溢出父容器 -
html { line-height: 1.15 }—— WHATWG 推荐最小可读行高，比1.2或1.4更稳妥，不干扰用户字体缩放
真正难的不是选哪个 reset 文件，而是理解哪些样式必须“保留”、哪些必须“显式覆盖”。比如 outline 永远不该全局清零，font-size 不该写死像素值，这些细节比重置本身更容易引发线上问题。
