什么是 normalize.css？
normalize.css 是一个纯粹的、小型的 CSS 文件，它的作用是在不同的浏览器中尽可能地抹平不同的默认样式，从而使得网站在不同的浏览器中呈现的效果更加准确、一致。
与之不同的是，reset.css 试图通过删除所有默认样式来建立起一个通用的、诸如表格、表单等元素样式复原表格、表单等元素的 CSS 文件；而 normalize.css 考虑到页面的默认行为通常是有用的，因此保留这些有用的样式，而不覆盖它们。
normalize.css 的适用场景
normalize.css 的适用场景主要包括以下几方面：
具有跨浏览器一致性的需求
不同的浏览器在默认样式上存在很大的差异，比如不同的字体大小、行高、边框大小和颜色、文本对齐方式等等。在这种情况下，为了确保页面的一致性，可以使用 normalize.css 来抹平这些差异。
减少 CSS 开发的时间和工作量
使用 normalize.css 可以避免每次从头开始写 CSS 时都需要考虑默认样式的问题，从而减少了 CSS 开发的时间和工作量。
改善可访问性的需求
normalize.css 着重于提高可访问性，比如添加了一些辅助属性（aria-role、aria-label 等）以增强可访问性。
提高易读性和维护性
normalize.css 相对于 reset.css 更注重易读性和可维护性。由于它只是在不同浏览器之间提供了一些样式的一致性，因此比 reset.css 要容易读懂和维护。
使用示例
首先，我们需要下载 normalize.css，并且将它引入到我们的 HTML 文件中。通常情况下，我们将 normalize.css 放在 CSS 文件夹中，然后通过 link 标签将其引入到 HTML 文件中：
--------- ----- ------ ------ ----- ---------------- -------------------- ---------- ----- ---------------- ------------------------- ------- ------ --------------- -------------- ------- -------
此外，我们可以通过在 normalize.css 中查找所需样式的方式来学习如何使用 normalize.css。以调整 a 标签默认色为例，我们可以在 normalize.css 中找到如下代码：
- - ----------------- ------------ -
这里的 a 指代的是所有的链接（ 标签），background-color: transparent; 则是将链接的背景色清空，去除默认颜色。如果我们想要修改链接默认颜色，可以在我们的 CSS 文件中增加如下代码：
- - ------ ---- -
总结
normalize.css 可以为我们提供跨浏览器的样式一致性、减少 CSS 开发时间和工作量、提高可访问性以及易读性和可维护性等方面的帮助。在以后的开发中，我们可以结合上述特点，灵活运用 normalize.css，从而优化页面效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654475757d4982a6ebe52ad1