用 normalize.css 而非手写重置或全量 reset，因其保留语义化默认行为、修复渲染差异且维护成本低；需置于 css 加载链首位，并配合 box-sizing: border-box 使用。

直接说结论：用 normalize.css，而不是手写 * { margin: 0; padding: 0; } 或全量 Eric Meyer’s Reset —— 它能保留语义化标签的合理默认行为，同时修复关键渲染差异，是当前最平衡、最省维护成本的选择。

为什么 body { margin: 0; } 无法解决顶部空白问题

这不是你漏写了样式，而是浏览器对 h1、p、ul 等元素各自设置了不同值的 margin-top。比如 Chrome 给 h1 设了 0.67em 上边距，Firefox 可能是 0.83em，而 Safari 还可能额外加 -webkit-margin-before。这些值会和 body 的 margin 发生外边距折叠（margin collapsing），最终“透出”到视口顶部。

仅重置 body 没用，因为问题出在子元素身上。你得统一控制所有常见元素的盒模型起点。

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

• normalize.css 会把 h1–h6 的 margin 标准化为一致值，并保留其层级语义（比如 h1 仍比 h2 大）
• 它修正 button 在 IE 中的垂直对齐、input[type="number"] 的箭头位置、textarea 的默认缩放行为等真实兼容性坑
• 不碰 font-size 和 line-height 的合理继承链，避免后续排版失控

如何正确引入 normalize.css 并避免加载顺序错误

它必须是整个 CSS 加载链里的第一个样式文件，否则后加载的样式会覆盖它的标准化规则，等于白引。

• 放在 中所有自定义 CSS <link> 之前：

  <link rel="stylesheet" href="node_modules/normalize.css/normalize.css"><link rel="stylesheet" href="styles/main.css">

• 如果是用构建工具（如 Vite/Webpack），确保 import 'normalize.css'; 出现在任何其他 CSS import 之前
• 不要把它和自定义 reset 混用 —— normalize.css + * { box-sizing: border-box; } 就够了，再多反而增加不可控变量

box-sizing: border-box 必须配合 reset 使用的原因

浏览器默认用 content-box 计算宽高，但开发者直觉是“我设了 width: 200px，那它就该占 200px”，结果加上 padding 和 border 就超了。这在 flex/grid 布局中尤其致命，会导致错行、溢出或对不齐。

• normalize.css 不改 box-sizing，所以你得自己补上：

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

• 这个通配符必须放在 normalize.css 之后、其他样式之前，否则会被后续选择器权重覆盖
• 注意：某些 UI 库（如 Bootstrap）已内置此规则，重复声明无害但冗余；若项目用的是 Tailwind，则它默认启用 border-box，无需额外加

真正容易被忽略的点是：reset 不是“一劳永逸”的开关，而是布局一致性的时间锚点。一旦你在 main.css 里写了 h2 { margin: 1rem 0; }，那就意味着你已接受这个值作为新基准 —— 后续所有组件都得基于它做相对调整，而不是回退去查浏览器原始值。没意识到这点，团队协作时样式就会悄悄漂移。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！