前言
在开发网站或者应用程序的时候，我们总是需要添加 CSS 样式表来美化我们所创建的内容。但是，不论是哪种浏览器，在加载 HTML 文件时都会有一些默认样式。比如，p 标签、li 标签和 h1 到 h6 标签都会带有一些默认的字体大小和样式。
因为这些默认的样式可能会影响我们想要实现的样式效果，所以有时候我们需要清除或者重置这些默认的样式。今天，我们来了解一下什么是 CSS Reset，以及为什么我们需要清除默认样式。
CSS Reset 是什么？
CSS Reset 是一种通过定义所有 HTML 元素的样式来清除浏览器默认样式的方法。通过使用 CSS Reset，我们可以为 HTML 元素定义出我们所需要的样式，而不会受到浏览器默认样式的干扰。
为什么要清除默认样式？
虽然浏览器默认样式是为了使 HTML 页面有一定的样式及呈现一定的效果，但是这些默认样式的存在通常会妨碍我们设计自己的样式。例如，我们可能并不希望 p 标签元素在默认情况下带有 margin 或者带有默认的字体大小，或者我们需要定制自己的列表样式。
此外，由于不同的浏览器默认样式的不一致，开发人员为了达到统一的页面效果而不得不用相对复杂的 CSS 样式定义。因此，为了便于对页面样式进行设计和调整，在开发任何一个网站之前，最好使用 CSS Reset 先清除浏览器默认样式。
常见的 CSS Reset 工具包括 Normalize.css、Eric Meyer's Reset CSS 等，其中 Normalize.css 是目前最为流行的一种。
如何实现 CSS Reset
编写简单的 CSS Reset
为了清除浏览器默认样式，我们可以定义一些简单的 CSS Reset。这些 CSS Reset 通常是一个网站开发中最轻量级的解决方案，也是最为灵活的方案。
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-定义上述样式会清除元素默认样式中的内外边距、字体大小、列表样式、quote 样式等。
使用 Normalize.css
Normalize.css 是一个相当流行的 CSS Reset 工具包，它几乎可以在所有 Web 项目中使用。Normalize.css 使用更多的样式来保持元素在不同浏览器上的一致性，且相对于其他 CSS Reset 工具包来说，Normalization 具有更好的浏览器兼容性。
Normalize.css 中包含了几乎所有 HTML 元素的 CSS 样式，下面是一个简单的示例：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
使用 Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是第一个被广泛使用的 CSS Reset 工具包。它可以在版本控制之前通过手动开发来实现 CSS Reset。它通过使用简单的 CSS 内容来覆盖所有浏览器中的默认样式。
Eric Meyer's Reset CSS 现已过时，更多开发人员选择使用 Normalize.css 或者自定义的 CSS Reset。
总结
清除浏览器默认样式的过程称为 CSS Reset。这是一种在设计 Web 页面时，用来 starting from scratch 的套路。它是用来确保页面在不同浏览器、不同操作系统或不同设备上呈现相同的效果。我们可以采用自己编写的简单 CSS Reset 样式或者使用第三方的 CSS Reset 工具包，以便为我们的 CSS 样式设计和调整提供方便和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462a113968c7c53b03ca8e8