在开发网页的时候，我们经常需要重置不同浏览器默认的样式，以确保页面不受浏览器不同的默认样式的影响。传统的 CSS Reset 会清空所有元素的默认样式，这常常会比较暴力地影响到页面的样式。
正因为这样，有一个更加温和的解决方案叫做 Normalize.css，它可以使得不同浏览器看起来比较相似，同时让我们更容易地开发出现代的、跨平台的网页。
本文介绍如何使用 Normalize.css 使页面在各种浏览器上呈现出一致的效果，同时保留浏览器默认的样式，以及它的优势和示例代码。
什么是 Normalize.css？
Normalize.css 是由 Nicolas Gallagher 和 Jonathan Neal 创造的一个将浏览器样式规范化的 CSS 文件。它修复了许多浏览器之间不同的默认样式，如标题和列表标记的大小、不同操作系统字体大小和外观，表单元素的大小、边距和线性，等等。对于跨浏览器一致性、更好的样式表现，Normalize.css 提供了一个更健壮的解决方案。
与传统的 CSS Reset 不同，Normalize.css 并不会清除所有的默认样式，而是在浏览器默认样式的基础上进行微调。这为开发人员提供了一个在现代浏览器中构建出更为一致和美观的网页的工具。
与其他 CSS 规范化材料相比，Normalize.css 是一个高度专注于具有普遍适用价值的样式修复的项目。Normalize.css 的所有类和元件是跨浏览器一致的，而且 Normalize.css 仅仅修复了解决大多数 Web 开发人员遇到的最具有普遍性和长期耐受性的问题。
使用 Normalize.css 的优势
- 维护难度低。Normalize.css 是普适的并能解决各种问题，因此能降低维护多套样式的难度。
- 文本样式一致。Normalize.css 解决了默认字体的大小，行高和其他外观的不一致。实现了不同浏览器显示一致的文本外观。
- 减少样式冲突。Normalize.css 可以防止我们在样式表之间有所冲突。
- 不需要任何配置，可以直接使用。相对于构建 CSS Reset，使用 Normalize.css 更加方便快捷。
如何使用 Normalize.css？
- 下载 Normalize.css
在 normalizecss.com 可以下载 Normalize.css，它包含了所有 Normalize.css 的规则和一些基本的 HTML 代码示例。当然，也可以使用 NPM 来安装 Normalize.css：
npm install normalize.css
安装完毕之后，将文件添加至项目的路径中。
- 引入 Normalize.css 文件
在 HTML 文件的 head 标签内添加下面的代码以引入 Normalize.css 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------- ----- ---------------- ----------------------------- ------- ------ ---------- ----------- ------- -------
- 使用 Normalize.css
引入 Normalize.css 文件之后，浏览器默认的样式就被修复了，并且一些元素的默认样式已经被微调。现在，我们可以为我们的网页添加样式，并且我们不需要担心浏览器的差异带来的问题了。
示例代码
下面是一个使用了 Normalize.css 的简单示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- -----------------------------
-------
---- -
------------ ------ -----------
---------- -----
------------ ----
------ -----
-
-- -
---------- -------
------------ -----
------ -----
-
--------
-------
------
---------- -----------
------- -- - --------- ---- ---- ---------
-------
-------该示例中，我们定义了网页的 body 和 h1 样式，并且因为引入了 Normalize.css，我们不需要担心浏览器的默认样式在我们的样式上的影响。
总结
在现代的网页开发中，使用 Normalize.css 是一种非常有好处的方式。它可以让我们更轻松地构建具有普遍适用性的网页，并且可以让不同浏览器之间的样式看起来更加一致和美观。Normalize.css 的使用方法也很简单，只需要下载、引入和使用就行了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d04c33b5eee0b525742380