作为前端开发人员，我们经常会发现浏览器默认的样式会给我们的页面带来很多麻烦。例如，我们想要一个简单的列表，但是当我们在 ul 和 li 元素中添加样式时，我们可能会发现各个浏览器的样式存在差异。这就是由于浏览器各自的默认样式而导致的。这种情况下，我们需要使用 CSS Reset 来消除默认样式。
什么是 CSS Reset？
CSS Reset 是一组针对浏览器默认样式的 CSS 规则。它们的作用是清除浏览器的默认样式，并使您的网站在各个浏览器中显示一致的外观。CSS Reset 并不是一种具体的技术，它可以由多种方式实现。
CSS Reset 非常实用，因为它可以解决各种问题，例如不同浏览器之间的样式差异，不同操作系统之间的差异，以及在不同设备上使用浏览器时的差异等等。
CSS Reset 的应用
在实践中，存在许多不同的 CSS Reset 方法。下面是一些最流行和最实用的 CSS Reset 技巧。
Normalize.css
Normalize.css 是一款基于 HTML5 的 CSS Reset 库，能够消除浏览器样式之间的差异。它与其他流行的 CSS Reset 不同之处在于，它尝试保留有用的浏览器默认样式，并根据需要进行调整。Normalize.css 还尝试修复一些常见的浏览器错误，并将许多CSS规范性质的东西纳入考虑范围内。
以下是 Normalize.css 的使用代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------- --
-------------------- ------------
-------
-------
---------- --- ----
--------
------
-------- ---- -----
-------
-------Eric Meyer's Reset
如果您需要一款更传统的 CSS Reset，可以使用 Eric Meyer's CSS Reset。该 Reset 模板消除了所有浏览器默认的样式，并在需要时进行样式化的规则。以下是 Eric Meyer's Reset 的使用代码：
-- -------------------- ---- -------
-- --- -----
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
-- --------------------------------------使用自定义的 CSS Reset
如果上述 CSS Reset 方法都不适合您的需求或您想快速尝试其他方法，您可以自定义您的 CSS Reset。最简单的方法是在所有选择器的样式表中添加空 CSS 规则。例如：
html, body, div, h1, h2, h3, h4, h5, h6, p, span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}CSS Reset 的重要性
CSS Reset 不仅可以消除样式差异，还可以确保页面的可访问性。如果您没有清除默认样式，那么您的页面很可能会包含很多不必要的代码，这会导致许多无法访问您的网站的人们无法浏览您的网站。
CSS Reset 也可以使开发工作更快、更简单和更具可靠性。通过消除默认样式，您可以更轻松地创建自己的样式，从而减少时间和精力的浪费。此时，您可以使代码更简洁，更易于管理，并使其更具可读性。
结论
CSS Reset 可以让您的网站更一致，更易访问并且可靠。您可以选择不同的 CSS Reset 方法，例如 Normalize.css、Eric Meyer's Reset 或自定义的 CSS Reset。无论哪种方法，它都可以节省您的时间和精力，并使您的工作更加舒适。让我们开始使用 CSS Reset 来消除浏览器默认样式吧！
参考代码
标准的 CSS Reset：
-- -------------------- ---- -------
--
- ---- ------
--
-----
---- -
------- -----
------- --
-------- --
---------- -----
------------ ----
-
---- -
------------ ------ -----------
------ -----
-
--
- ----- ---- -------- ---- --------
--
--- --- --- --- --- -- -
------- --
------------ ----
-
- -
------- - - ----
-
--- -- -
------- - - ----
-------- --
-------------------- --------
----------------- -----
-
- -
------ --------
---------------- -----
-
------- -
---------------- ----------
-
--
- --- ---- ------- -------
--
------- -
-------- ---- -----------
-
------------ -
------ ------
-
----------- -
------ -----
-
--------- -
------ -----
-
------------- -
----------- -------
-
------------ -
----------- ------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67398dad317fbffedf175d16