<p>直接写 { margin: 0; padding: 0; } 很危险，因会重置伪元素、降低性能、抹平表单默认行为；box-sizing: border-box 必须扩展至 ::before, *::after；HTML5 语义标签需显式设 display: block；表单重置要分层保留可访问性。</p>
为什么直接写 * { margin: 0; padding: 0; } 很危险
它确实能快速“清零”，但副作用明显：所有伪元素（::before、::after）也被强制重置，而很多 UI 组件（比如 tooltip、badge）依赖这些伪元素渲染内容；通配符选择器性能开销大，尤其在 DOM 深度大的页面里，浏览器必须为每个节点做匹配计算；更关键的是，它把 fieldset、textarea、button 等需要保留部分默认行为的元素一并抹平，反而增加后续修复成本。
box-sizing: border-box 必须加到 *::before 和 *::after
只写 * { box-sizing: border-box; } 不够——伪元素默认是 content-box，一旦你用它们模拟边框或阴影，尺寸就会意外溢出。正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}这个组合覆盖了所有真实元素和伪元素，且不会影响可访问性（比如 focus outline 的计算逻辑）。漏掉 *::before 或 *::after 是线上项目里最常被忽略的兼容性坑。
HTML5 语义标签必须显式声明 display: block
哪怕用了 normalize.css，旧版 Safari 或某些 Electron 内核仍可能把 article、section、nav 当作 inline 元素处理，导致浮动失效或文字塌陷。不能依赖 DOCTYPE 声明自动生效。
立即学习“前端免费学习笔记（深入）”；
- 必须手动加这一段（放在 reset 规则最前）：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } - 不要省略
hgroup和summary，它们在 Safari 14–15 中仍有 display 异常 - 如果项目要支持 IE11，还得额外加
menu { display: block; }
表单控件重置要分两层处理
单纯写 input, button { margin: 0; padding: 0; } 会破坏原生 focus 可访问性，且不同浏览器对 type="number" 的 spin button 处理差异极大。
- 基础层（保留可访问性）：
input, select, textarea, button { margin: 0; padding: 0; font: inherit; line-height: 1.15; color: inherit; background-color: transparent; } - 增强层（按需覆盖）：针对
input[type="number"]、input[type="search"]单独加appearance: none;，再手动补上 border 和 padding - 永远不重置
:focus，而是用outline: none+box-shadow替代，否则键盘用户无法导航
实际项目里最容易被跳过的，是伪元素的 box-sizing 和 HTML5 标签的 display 声明——它们不出错时毫无存在感，一出错就是整块布局偏移或交互失灵，而且很难定位。
