<p>应直接使用 normalize.css 而非手写 * { margin: 0; padding: 0 }，因其会破坏语义、拖慢渲染、漏掉伪元素且损害可访问性；需确保其作为首个样式表引入，并补充 box-sizing、font-size、text-size-adjust 等关键调整。</p>
直接用 normalize.css，别手写 * { margin: 0; padding: 0 } —— 它看似简单，实则破坏语义、拖慢渲染、漏掉伪元素，新手踩坑率接近100%。
为什么新手不该自己写通配符重置
新手常以为“清零最安全”，但 * { margin: 0; padding: 0; box-sizing: border-box } 会带来一连串隐性问题：
-
fieldset、details、summary等语义化元素失去默认间距和交互行为，表单可访问性直接受损 - 移动端高密度 DOM 下，通配符选择器强制重排重绘，iOS Safari 首屏延迟增加 8–12ms
- 漏掉
*::before和*::after，导致使用grid-template-areas或calc()布局时视觉错位（Safari 15.4 之前尤其明显） - 所有表单控件（如
input[type="number"]）的原生微调按钮、缩放行为、焦点样式被一并抹除，用户操作预期断裂
如何正确引入 normalize.css
它不是“加个文件就行”，顺序和加载方式决定是否生效：
-
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">必须是<head>中第一个<link>，早于任何自定义 CSS - Webpack/Vite 项目：在主 SCSS/Sass 入口顶部写
@import 'normalize.css';，确保打包后位于输出 CSS 最前面 - 绝对不要把
normalize.css内容复制粘贴进你的main.css末尾——它的修复逻辑依赖声明顺序和低权重选择器 - 检查构建产物：搜索
button { font-family: inherit }是否出现在你自己的button规则之前；否则字体继承失效，Windows/macOS 渲染不一致
normalize.css 后必须补的三处关键调整
normalize.css 本身不设 box-sizing: border-box，也不统一响应式基础尺寸，新手项目需手动补上：
立即学习“前端免费学习笔记（深入）”；
- 在
normalize.css后立即加：*, *::before, *::after { box-sizing: border-box; }（必须带伪元素） - 显式设置
html { font-size: 100%; -webkit-text-size-adjust: 100%; }，防止 iOS Safari 缩放时行高塌陷 - 给
body加font-family和line-height，例如：body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }；否则normalize.css的字体继承可能回退到 UA 默认值
真正容易被忽略的点是：normalize.css 不处理 viewport 兼容性，也不覆盖 text-size-adjust 在旧 Android 上的行为。如果项目要支持安卓 WebView 4.x 或 iOS 9，得额外加 html { -ms-text-size-adjust: 100%; } —— 这类细节不会报错，但文字会在某些设备上突然变小或挤在一起。
