在前端开发中，我们经常需要对页面进行样式重置，以确保页面在不同浏览器下呈现出一致的效果。常用的样式重置有两种：Normalize.css 和常用 CSS Reset。那么这两种样式重置有什么不同呢？本文将对它们进行详细的比较和分析。
CSS Reset
CSS Reset 是一种常用的样式重置方法，它会将页面元素的默认样式全部清除，以达到页面样式统一的目的。常用的 CSS Reset 样式有 Eric Meyer's Reset CSS 和 Yahoo! Reset CSS。
Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是一种比较经典的 CSS Reset 样式，它将页面元素的默认样式全部清除，并对常用的页面元素进行重新定义。以下是 Eric Meyer's Reset CSS 的示例代码：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-Yahoo! Reset CSS
Yahoo! Reset CSS 是 Yahoo! 团队提供的一种 CSS Reset 样式，它与 Eric Meyer's Reset CSS 类似，但对一些页面元素的样式定义略有不同。以下是 Yahoo! Reset CSS 的示例代码：
-- -------------------- ---- -------
----------------------------------------
-----------------------------------
-------------------------------------
--------------------------------
-----------------------------------
-------------
------------------
---------------------------
---------------------------------------- -
---------
----------
---------
----------
---------------
------------------------
-----------------------
-
---- -
--------------
-
----- -
----------------
-
------------ -
------------
-
-----------------------------------
---------------- -
-----------
-------------
-
----- -
-------------------------
-----------------
-Normalize.css
Normalize.css 是一种相对于 CSS Reset 更加细粒度的样式重置方法，它不会将所有的默认样式全部清除，而是对一些常见的样式进行了标准化。Normalize.css 可以确保在不同浏览器下，页面元素的默认样式都是一致的。以下是 Normalize.css 的示例代码：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - --- - ------ --- ---------- -------- ----- -- -------- -- --------------------------- - ------------ -------- - --- - -- ------- --- ----------- --- --------- -- --- --------- - -- ------- --- --------- -- --- ------ ---- -- ------ --- ------- -- ---------------------------- - ------------------- ------- -- - -- ------------ ------- -- - -- ----- -------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - -------- ----- -
比较
相对于常用的 CSS Reset 样式，Normalize.css 更加细粒度，对一些常见的样式进行了标准化。这可以确保在不同浏览器下，页面元素的默认样式都是一致的。而常用的 CSS Reset 样式则会将页面元素的默认样式全部清除，需要重新定义所有样式。
Normalize.css 还支持 Responsive Web Design，可以根据屏幕尺寸自适应调整样式。而常用的 CSS Reset 样式则不支持 Responsive Web Design。
在使用 Normalize.css 时，我们只需要将其引入到项目中即可。而使用常用的 CSS Reset 样式，则需要重新定义所有样式。
结论
在实际开发中，我们可以根据项目需求选择适合的样式重置方法。如果需要更加细粒度的样式控制，可以选择使用 Normalize.css。如果只需要简单的样式重置，可以选择常用的 CSS Reset 样式。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676cf33982fcee791c622ef5