在开发前端页面时，我们经常会遇到浏览器默认样式的问题，不同浏览器默认的样式可能不一致，这给我们的页面设计带来了很多麻烦。为了解决这个问题，我们可以使用 CSS Reset 来重新定义 HTML 元素的样式。
CSS Reset 是什么
CSS Reset 是一种 CSS 技术，它可以让开发者自定义 HTML 元素的默认样式，以解决不同浏览器默认样式的不一致性问题。CSS Reset 就是一系列针对不同浏览器默认样式的声明，并给出所有 HTML 元素的默认样式。
CSS Reset 的使用
在使用 CSS Reset 时，我们可以有两种选择：使用现成的 CSS Reset 或自定义样式来实现。
使用现成的 CSS Reset
目前常用的 CSS Reset 有两种，一种是 Eric Meyer 开发的 CSS Reset，另一种是 YUI （Yahoo User Interface）开发的 Reset CSS 。两种 Reset CSS 的实现方式都类似，只是具体实现有些许区别。
我们在项目中使用 CSS Reset 时，只需将 Reset CSS 的代码粘贴进我们自己的项目 CSS 文件中即可，然后再编写我们自己的 CSS 样式即可。
下面是 Eric Meyer 开发的 CSS Reset 示例代码：
-- -------------------- ---- -------
--
---- ------- ----- --- ---- -------------------------------------------
-------------------
--
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-自定义样式实现 CSS Reset
我们可以借鉴已有的 Reset CSS，也可以自己写一份，来重新定义 HTML 元素的默认样式。自定义 CSS Reset 的优点在于，我们可以根据自己的需求来定制化样式，也不必要显式地为所有 HTML 元素写样式，只需要根据需求对特定标签进行样式定义即可。
下面是一个简单的自定义 CSS Reset 示例代码：
-- -------------------- ---- -------
-- --- --- ----- --
----- ---- -
---------- -----
------------ ---------- ------ ------------ --------- ---- --------- ---- ---- ---------- ------- -----------
----------------- --------
-
--- --- --- --- --- -- -
------------ -----
-------------- -----
-
- -
------------ ----
-------------- -----
-
- -
------ -----
---------------- -----
-
--- -- -
-------------- -----
-
--- -
---------- -----
------- -----
-------- ------
-
------ --------- ------ -
-------------- --
------------ ---------- ------ ------------ --------- ---- --------- ---- ---- ---------- ------- -----------
-
------ -
------- --------
-总结
使用 CSS Reset 可以解决不同浏览器默认样式的不一致性问题，我们可以使用已有的 Reset CSS，也可以根据自己的需求定制化样式。无论哪种方式，只要能够重新定义 HTML 元素的默认样式，让我们的页面得到更好的兼容性和可定制性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e07292f6b2d6eab3b87db2