在前端开发中，CSS Reset/Normalize.css 是很重要的一环。它们可以帮助我们解决不同浏览器之间的样式差异，提高开发效率。本文将介绍一些优秀的 CSS Reset/Normalize.css，并提供示例代码，希望能对大家有所帮助。
一、CSS Reset 和 Normalize.css 是什么？
1. CSS Reset
CSS Reset 是一种 CSS 文件，它的作用是将所有 HTML 元素的默认样式都设置为相同的值，从而解决浏览器之间的样式差异，让所有浏览器都以同样的方式呈现页面。CSS Reset 的目的是让开发人员从浏览器的默认样式中解放出来，从而更加自由地设计网页。
2. Normalize.css
Normalize.css 是一种 CSS 文件，它的作用是在保留有用的浏览器默认样式的同时，修正了一些常见的浏览器样式 bug，从而使得不同浏览器之间的样式表现更加一致。Normalize.css 的目的是让开发人员在保留有用的默认样式的同时，尽可能地减少样式差异，从而提高开发效率。
二、优秀的 CSS Reset/Normalize.css
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 之一，它的作者是 CSS 大牛 Eric Meyer。这个 Reset 文件非常小巧，只有不到 1KB，但它能够清除所有元素的默认样式，并将它们的样式设置为相同的值，从而实现浏览器的样式一致性。
示例代码：
-- -------------------- ---- -------
-- ---- ------- ----- --- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-2. Normalize.css
Normalize.css 是最受欢迎的 Normalize 文件之一，它的作者是 Nicolas Gallagher 和 Jonathan Neal。这个 Normalize 文件的体积比较大，但它能够修正一些常见的浏览器样式 bug，从而使得不同浏览器之间的样式表现更加一致。
示例代码：
-- -------------------- ---- -------
-- ------------- --
---- -
------------ -----
------------------------- -----
-
---- -
------- --
-
---- -
-------- ------
-
-- -
---------- ----
------- ------ --
-
-- -
----------- ------------
------- --
--------- --------
-
--- -
------------ ---------- ----------
---------- ----
-
- -
----------------- ------------
----------------------------- --------
-
----------- -
-------------- -----
---------------- ----------
---------------- --------- -------
-
--
------ -
------------ --------
-
--
------ -
------------ -------
-
-----
----
---- -
------------ ---------- ----------
---------- ----
-
--- -
----------- -------
-
---- -
----------------- -----
------ -----
-
----- -
---------- ----
-
----
--- -
---------- ----
------------ --
--------- ---------
--------------- ---------
-
--- -
------- --------
-
--- -
---- -------
-
------
----- -
-------- -------------
-
--------------------- -
-------- -----
------- --
-
--- -
------------- -----
-
-------------- -
--------- -------
-
-------
------
---------
-------
-------- -
------------ --------
---------- -----
------------ -----
------- --
-
-------
----- -
--------- --------
-
-------
------ -
--------------- -----
-
---------------
----------------
-------
---- --------------- -
------------------- -------
-
----------------------------------
---------------------------------
----------------------------------
------------------------ -
------------- -----
-------- --
-
-------------------------------
------------------------------
-------------------------------
--------------------- -
-------- --- ------ -----------
-
-------- -
-------- ------ ------ --------
-
------ -
----------- -----------
------ --------
-------- ------
---------- -----
-------- --
------------ -------
-
-------- -
-------- -------------
--------------- ---------
-
-------- -
--------- -----
-
------------------
-------------- -
----------- -----------
-------- --
-
-------------------------------------------
------------------------------------------ -
------- -----
-
--------------- -
------------------- ----------
--------------- -----
-
----------------------------------------------
------------------------------------------ -
------------------- -----
-
---------------------------- -
------------------- -------
----- --------
-
------- -
-------- ------
-
------- -
-------- ----------
-
-------- -
-------- -----
-
-------- -
-------- -----
-3. Reset.css
Reset.css 是由 Yahoo 开发的一款 CSS Reset 文件，它的体积比较小，但它能够清除所有元素的默认样式，并将它们的样式设置为相同的值，从而实现浏览器的样式一致性。
示例代码：
-- -------------------- ---- -------
-- --------- --
-----
-----
----
-----
-------
-------
-------
---
---
---
---
---
---
--
-----------
----
--
-----
--------
--------
----
-----
-----
----
----
---
----
----
----
--
--
-----
------
-------
-------
----
----
---
----
--
--
--
-------
---
---
---
---
---
---
---------
-----
------
-------
------
--------
------
------
------
---
---
-- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
---
-- -
----------- -----
-
-----------
- -
------- -----
-
------------------
-----------------
---------
------- -
-------- ---
-------- -----
-
-- -------- -- ------ ----- ------- --
------ -
-------- --
-
-- -------- -- --------- ------- -------- --
--- -
---------------- -----
-
--- -
---------------- -------------
-
-- ------ ----- ---- ----------------- -- --- ------ --
----- -
---------------- ---------
--------------- --
-三、如何选择合适的 CSS Reset/Normalize.css？
选择合适的 CSS Reset/Normalize.css 需要考虑以下几个因素：
1. 项目需求
不同的项目有不同的需求，有些项目可能需要更加严格的样式控制，有些项目可能需要更加灵活的样式设计。因此，在选择 CSS Reset/Normalize.css 的时候，需要根据项目需求来选择。
2. 兼容性
不同的 CSS Reset/Normalize.css 对于不同的浏览器兼容性也有所不同，有些 Reset 文件可能对一些浏览器不兼容，需要进行适当的兼容性处理。
3. 体积大小
CSS Reset/Normalize.css 的体积大小也是选择的一个因素。体积较小的 Reset 文件可以提高页面加载速度，但可能会牺牲一些样式控制的灵活性。
四、总结
CSS Reset/Normalize.css 是前端开发中不可或缺的一部分，它们可以帮助我们解决不同浏览器之间的样式差异，提高开发效率。在选择 CSS Reset/Normalize.css 的时候，需要考虑项目需求、兼容性和体积大小等因素，选择合适的 Reset 文件可以提高开发效率和页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655eb5e5d2f5e1655d8da5f7