CSS reset 与 normalization

Begindev 编辑部 March 25, 2026

浏览器对 HTML 元素都有内置的默认样式，但这些样式在不同浏览器之间差异很大。这种不一致性会让你的网站在不同平台上看起来千差万别。

CSS Reset（重置） 和 Normalization（标准化） 技术旨在消除这些差异，为你的样式设计提供一个更可预测的基础。

1. 理解浏览器默认样式

每个浏览器都会对 HTML 元素应用自己的默认样式。

例如：

标题 (<h1> 到 <h6>)：通常有不同的字体大小和边距。
段落 (<p>)：带有边距。
列表 (<ul>, <ol>)：带有内边距（padding）和项目符号或数字。

这些默认样式在 Chrome、Firefox、Safari、Edge 等不同浏览器，甚至同一浏览器的不同版本之间都可能不一致。

举个例子：
一个简单的 <h1> 标题，某个浏览器可能渲染为 32px 字体和 20px 上边距，而另一个浏览器可能渲染为 36px 字体和 24px 上边距。这些细微的差异累积起来，会导致严重的布局错位。

另一个例子是 button 元素。按钮的外观在不同浏览器中差异巨大。有些浏览器会添加默认边框、背景色和内边距，而有些则不会。这使得在所有平台上统一样式变得充满挑战。

2. 为什么需要 CSS Reset 和 Normalization

主要目标是 消除或减少浏览器之间的不一致性，为你的自定义样式提供一个干净的“白板”。这能确保无论用户使用什么浏览器，你的网站都能按预期显示和运行。

如果没有重置或标准化样式表，你将花费大量时间调试和调整 CSS 来弥补浏览器特有的怪癖。这非常耗时且令人沮丧，尤其是在处理复杂布局时。

3. CSS Reset (CSS 重置)

CSS Reset 旨在完全剥离所有浏览器的默认样式。它将所有元素设置为一致的基准线，通常是将边距、内边距、边框和其他属性设置为零或通用值。

3.1 CSS Reset 如何工作

CSS Reset 通常使用通用选择器 (*) 或针对大量 HTML 元素应用一组基本样式。

下面是一个简化的 CSS Reset 示例：

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* 为旧浏览器重置 HTML5 显示角色 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

代码解释：

* { margin: 0; padding: 0; border: 0; }: 这是重置的核心。它移除了页面上每个元素的所有外边距、内边距和边框。
font-size: 100%; font: inherit;: 确保字体大小相对于根元素，并且元素从父级继承字体属性。
vertical-align: baseline;: 将所有元素的垂直对齐方式设置为基线，这是一个通用的起点。
article, aside, details, ... { display: block; }: 确保 HTML5 语义元素显示为块级元素，这对不识别这些元素的旧浏览器是必要的。
ol, ul { list-style: none; }: 移除列表默认的项目符号或数字。
blockquote, q { quotes: none; }: 移除引用块和引用的默认引号。
table { border-collapse: collapse; border-spacing: 0; }: 确保表格边框合并为单一边框，且单元格之间没有间距。

3.2 流行的 CSS Reset 库

Normalize.css: 虽然技术上是标准化样式表，但因其全面性常被用作重置方案。
Reset.css (Eric Meyer): 一个非常流行且广泛使用的 CSS 重置库。
sanitize.css: 一个保留有用浏览器默认值而非完全移除它们的重置库。

3.3 CSS Reset 的优缺点

优点：

为样式设计提供完全干净的白板。
消除几乎所有的浏览器不一致性。

缺点：

移除所有默认样式，意味着你必须从头开始为每个元素写样式。
如果不小心，有时会导致意想不到的结果。

4. CSS Normalization (CSS 标准化)

CSS Normalization 旨在使浏览器的默认样式更加一致，而不是完全删除它们。它保留有用的默认样式，同时修复不一致和 Bug。

4.1 CSS Normalization 如何工作

CSS Normalization 针对已知在浏览器间存在不一致的特定元素和属性。然后应用样式来“标准化”这些差异，同时保留默认样式的整体外观和感觉。

下面是一个简化的 CSS Normalization 示例：

/* CSS Normalization */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* 其他元素以此类推 */

代码解释：

html { font-family: sans-serif; }: 为整个文档设置默认字体族，确保浏览器间的一致性。
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }: 防止移动设备上的文本大小自动调整，确保文本大小保持一致。
body { margin: 0; }: 移除 body 的默认边距。
article, aside, footer, header, nav, section { display: block; }: 确保 HTML5 元素正确显示。
h1 { font-size: 2em; margin: 0.67em 0; }: 标准化 h1 元素的字体大小和边距。

4.2 流行的 CSS Normalization 库

Normalize.css: 最流行且广泛使用的 CSS 标准化库。

4.3 CSS Normalization 的优缺点

优点：

保留有用的默认样式。
修复浏览器不一致和 Bug。
相比 CSS Reset，需要从头编写的样式更少。

缺点：

可能无法消除所有的浏览器不一致。
需要对浏览器默认样式有更深入的理解。

5. 在 CSS Reset 和 Normalization 之间做选择

选择哪一个取决于你项目的具体需求。

使用 CSS Reset，如果：

你想完全控制每个元素的样式。
你从零开始一个项目，想要一张完全的白纸。
你使用的设计系统或框架要求使用 CSS Reset。

使用 CSS Normalization，如果：

你想保留有用的默认样式。
你正在处理一个已经有一些样式的项目。
你想要一个比 CSS Reset 更轻量级的解决方案。

在许多情况下，使用像 Normalize.css 这样的标准化库是一个很好的起点，因为它在保持一致性和保留有用默认样式之间取得了平衡。

6. 实战案例

让我们看几个实际例子来说明 CSS Reset 和 Normalization 的区别。

6.1 案例 1：标题 (Headings)

如果没有 Reset 或 Normalization，标题 (<h1> 到 <h6>) 在不同浏览器中可能有不同的字体大小、边距和粗细。

CSS Reset: 会将所有标题的 font-size、margin 和 font-weight 设置为通用值（例如 font-size: 1em; margin: 0; font-weight: normal;）。你需要从头开始编写样式以达到想要的外观。
CSS Normalization: 会标准化标题的字体大小和边距，使其在浏览器间更一致，同时保留 <h1> 到 <h6> 之间的相对大小差异。你只需做微调即可。

6.2 案例 2：列表 (Lists)

如果没有 Reset 或 Normalization，列表 (<ul>, <ol>) 在不同浏览器中可能有不同的内边距和项目符号/数字样式。

CSS Reset: 会移除列表的所有内边距和项目符号/数字（例如 padding: 0; list-style: none;）。你需要从头开始编写样式来添加自定义的项目符号或数字以及间距。
CSS Normalization: 会标准化列表的内边距和样式，使其更一致，同时保留列表默认的基本外观。你只需做微调即可。

案例 3：按钮 (Buttons)

如果没有 Reset 或 Normalization，按钮 (<button>) 在不同浏览器中的外观差异极大，包括不同的边框、背景色和内边距。

CSS Reset: 会移除按钮的所有默认样式（例如 border: none; background-color: transparent; padding: 0;）。你需要从头开始设计按钮样式以实现一致的外观。
CSS Normalization: 会标准化按钮的外观使其更一致，同时保留一些基本的按钮样式。你只需做微调即可。

7. 如何应用 CSS Reset 或 Normalization

要应用 CSS Reset 或 Normalization，只需在你的样式表的最开头引入对应的 CSS 文件。这确保了重置或标准化样式在你自己的样式之前被应用。

<!DOCTYPE html>
<html>
<head>
  <title>我的网站</title>
  <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css">
</head>
<body>
  </body>
</html>

在这个例子中，reset.css (或 normalize.css) 在包含你自定义样式的 style.css 之前被引入。