在前端开发中，我们需要使用 CSS 来控制网页的样式。不同的浏览器对 CSS 的解析不尽相同，可能会出现一些样式差异，这就需要使用 CSS Reset 去消除这些差异。CSS Reset 是一种标准化的 CSS 样式重置方法，是为了消除这些跨浏览器差异而设计的。本文将介绍一些常见的 CSS Reset 解决方案。
1. Eric Meyer’s CSS Reset
Eric Meyer’s CSS Reset 是最初的 CSS Reset 解决方案，它是第一个被广泛采用的。该解决方案通过将所有的元素的外边距 (margin) 和内边距 (padding) 设置为0，将所有的元素的边框 (border) 设置为none，从而消除了浏览器的默认样式。CSS Reset 的代码如下：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- ----------- ----- ------ -------- ---------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - --------- ------ - ---- - ------------- -- - --- -- - ------------ ----- - ----------- - - -------- ----- - ------------------ ----------------- --------- ------- - --------- --- --------- ----- - ----- - ----------------- --------- ---------------- -- -
2. Normalize.css
Normalize.css 是另一种常见的 CSS Reset 解决方案。与 Eric Meyer’s CSS Reset 不同，Normalize.css 不是要完全重置所有的样式，而是要在所有浏览器上始终提供更一致的默认样式。Normalize.css 对于所有的 HTML 元素都是一样的，不区分块状元素和内联元素。它保留了有用的默认样式，如一些表单元素的外边距和内边距，和表格的边框样式等。
Normalize.css 的代码如下：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - --- --- ------- ------- -- -- --- -- -------- ------ ------- ------- ---- ------- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- -- -------- ------ ------- --- - ------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ----- -- ------- -------- --- ------- -- -- --- -- --- -- --- -- --- -- -- - ------- -- - --- - ------ --- ------ -- ------ ----- -- -- --- -- -- --- -- --- -- --- -- -- - ------- -- - --- - -- --- --- ------- ------- -- -- --- - -- ------ --- ------ -- ------ ------ ----- -- -- ---- -- --- - ------------- ----- -- - -- - -------------- - --------- ------- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------- -- -- - -- - --- - ------ --- ----------- -- ---- --------- -- ---- --- -------- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - -- ------ --- ----- ------ --- ------- -- -------- - -- ------- --- ----- ------ ----- -- --- -------- ----- -- ------------------ -------------- - ----------- ----------- -- - -- -------- -- -- - -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- -- --- - -- --- --- ------- ------- -- ----- --- --- -------- -- -------- -- - -- ---- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - -------- ----- -
3. Yahoo’s Reset CSS
Yahoo’s Reset CSS 是一种轻量级的 CSS Reset 解决方案，它较其他解决方案更注重排版和排版表现。例如，它保留了表格的边框，只改变了默认字体大小和行高等属性。
Yahoo’s Reset CSS 的代码如下：
-- -------------------- ---- -------
---
- --- ------ - ----- ---
- -----------------------------------------
-
- ------ ------- -------- --------- -- -------- --- -- ---- --- -----
- ---------- ---- -- --- --- -------- ------------ ----- --- --- -------
- ---- -------------------------------------------------------
- ---------- ----- -- --- -------- --------
--
---------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------ ------ --------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------- ------- --------------------------------------------------------------------------------------------------------------------------------------------------------------- ----- ----- ----- ----- ----------------------------------- ----- ----------- - - --------------------------------- ----- ----------------------------- ----- ---------------------------------------------------------------------------------------- - ---- ------------------------ ----- ------------- ----------------- ------ ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-- -- --
---- ------- --- ----- ---- --- ----- ------------------------------------------------------------- ------- --- ----- -------------------------------------------------------------- ----- --- - ------------- -------------------- --- ----- -----------------------------------
---
-------
--------- -----
----- ----------
------
----- ----------------
-------------- -- --- -------------
-------
------ ------- --- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-
--------- -------
-----
----------------- -----
-
-----
------ ------
------- - -----
----------------- -----
-------- -----
-
---
---------- -----
------------ -----
----------- -------
-------------- -----
-
--
---------- -----
-------------- -----
-
---
------------ -----
-
---
---------- -----
-------------- -----
-
--------
-------
------
---- ------------
------ ------- -- --- ----------
------ ----- -- - -------- --- ----- ----- ------ ---- ---------- ------------- ------------ ----- --- ------- -------- ---- --- ----- ---------- --------------
----
-------- ------- ----- --------
----------------------
----------- ----- --------
-----
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471cb0c968c7c53b0fa7bbe