Normalize 和 Reset 的区别

最新推荐文章于 2023-01-04 14:01:41 发布

lio_zero

最新推荐文章于 2023-01-04 14:01:41 发布

阅读量253

点赞数

文章标签： firefox safari css chrome javascript

本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369345

版权

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

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

由于默认样式不相同，因此每个浏览器上的网页将具有不同的外观。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。它已经包含在：