Normalize 和 Reset 的区别

每个浏览器都提供一组默认样式，这些样式应用于它呈现的每个网页。默认样式表也称为用户代理样式表。

您可以查看以下浏览器各自所提供的默认样式：

• Chrome
• Firefox
• Safari

由于默认样式不相同，因此每个浏览器上的网页将具有不同的外观。Normalize 和 Reset CSS 都旨在解决这个问题。

顾名思义，Reset CSS 将重置所有内置样式。

最流行的 CSS 重置库是 Meyer's reset。你可以在这里看到完整的代码。例如，它会将 body 的 margin 重置为 0：

body {
  margin: 0;
}

如果你使用 Chrome 浏览器的开发者工具，检查任何网页的 body 元素，你会发现默认情况下它有 8px 的边距，这是我们通常根本不想要的：

body {
  margin: 8px;
}

Normalize CSS 是 Reset CSS 的另一种选择。

最受欢迎的库是 normalize.css。它试图使内置的浏览器样式在不同浏览器之间保持一致。

除此之外，normalize.css 还使某些元素看起来像我们期望的。例如，Chrome、Firefox 和 Safari 浏览器对 sub 和 sup 标签使用以下样式：

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

它修复跨浏览器的显示错误。你可以查看它的源代码看到有很多针对不同浏览器的错误修复，比如 IE、Edge、Firefox 等。

如果你使用流行的 CSS 库，你可能不需要在项目中包含 normalize.css。它已经包含在：

• Bootstrap's reboot
• Tachyons
• Tailwindcss
• etc

更多资源

• water.css 为常用标签添加了更多视觉样式
• minireset 是另一个小型的现代 CSS 重置
• Browser Default Styles 允许我们获取特定元素的各种渲染引擎的默认样式
• CSS Reset 与 Sprites