什么是CSS Reset？
CSS Reset是一种方法，用于统一浏览器默认样式以及不同浏览器之间的样式差异。CSS Reset通常是通过重置HTML元素的样式来实现的，然后在样式表中重新定义样式。
为什么需要CSS Reset？
不同的浏览器，甚至同一浏览器的不同版本，都有自己的默认样式。这可能导致你的网站在不同的浏览器中显示不一样的外观，使你的网站失去一致性。而CSS Reset的作用就是把浏览器默认的样式进行重置，从而在多浏览器中显示样式保持一致。
CSS Reset的缺点
虽然CSS Reset可以为我们带来很多好处，但它的确也存在某些缺点。比如在重置一些默认的样式时，可能会给我们带来一些额外的工作量。一些UI组件（如按钮、下拉菜单）可能会在某些情况下无法正常工作，因为重置的样式可能会影响其工作。
CSS Reset的实现方法
Eric Meyer法
可以把以下CSS样式定义为CSS Reset（以Eric Meyer’s reset为例）：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-Normalize.css法
在Eric Meyer Reset的基础上，Normalize.css在一定程度上改进了前者在reset全局样式时的不足之处，相较于Eric Meyer Reset，Normalize.css更具备可定制性，它并不是把所有样式都清零，而是把各种元素的表现统一化，尤其是在HTML5标签出来后，对于这些新的元素进行初始化样式，弥补了很多浏览器在对待这些新标签的不同处理方式，而且它被公认为专业且高效的CSS Reset库。
可以从官网下载最新版本。
如何使用CSS Reset？
在使用CSS Reset之前，需要认真考虑该如何应用Reset到您的项目中。您可以将CSS Reset添加到全局样式表中，也可以针对每个HTML页面进行样式重置。
在样式表中，可以根据需要选择使用Eric Meyer Reset或Normalize.css。如果您愿意，您也可以创建自己的自定义reset。
以Eric Meyer Reset为例，可以在样式表中加入以下代码：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-然后在html文件中链接该样式表：
<link rel="stylesheet" href="css/reset.css">
CSS Reset的示例
以下是一个使用Eric Meyer Reset的示例：
index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ------------
----- ---------------- -----------------
----- ---------------- -----------------
-------
------
----------- -- -- ----------
-------- ----- ----- --- ---- ----------- ----------- ----- ----------- ------------ --- ------ -------- ---- -------
---- -------------------------- ----------- -------
-------
-------reset.css
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-style.css
-- -------------------- ---- -------
---- -
----------------- --------
------------ ------ -----------
---------- -----
------ -----
-
-- -
-------------- -----
---------- -----
------------ -----
----------- -------
-
- -
-------------- -----
----------- -------
-
--- -
-------- ------
------- - -----
---------- -----
------- -----
-总结：
CSS Reset虽然存在一些缺点，但它可以确保不同浏览器下网站的样式保持统一，从而提供更好的用户体验。鉴于Eric Meyer Reset可能导致UI组件的问题，推荐使用Normalize.css，或者是自己编写适合自己网站的CSS Reset。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f578f7d4982a6eb074f18