什么是 CSS Reset？
在编写网页的时候，我们通常会使用 CSS 来控制页面的样式。但是，不同的浏览器对于 HTML 元素的默认样式是不一样的，这就会导致不同的浏览器在显示网页时会产生不同的效果，这就是所谓的浏览器兼容性问题。为了解决这个问题，我们可以使用 CSS Reset。
CSS Reset 是一种用来重置不同浏览器对 HTML 元素默认样式的技术。通过使用 CSS Reset，我们可以确保在不同的浏览器中，页面的样式是一致的。
选择合适的 CSS Reset 方案
在选择 CSS Reset 方案时，我们需要考虑以下几个方面：
1. 重置的程度
不同的 CSS Reset 方案，对于 HTML 元素的默认样式的重置程度是不一样的。有些方案只是针对一些常见的样式进行重置，而有些方案则会对所有的样式进行重置。
如果你希望页面的样式更加自定义化，那么你可以选择重置程度较低的方案。但是，如果你希望页面的样式更加统一，那么你可以选择重置程度较高的方案。
2. 兼容性
不同的 CSS Reset 方案，在不同的浏览器中的兼容性也是不一样的。有些方案会在某些浏览器中出现兼容性问题，而有些方案则可以在大多数浏览器中正常使用。
在选择 CSS Reset 方案时，我们需要考虑我们的网站需要支持哪些浏览器，然后选择一个兼容性比较好的方案。
3. 代码量
不同的 CSS Reset 方案，其代码量也是不一样的。有些方案的代码量比较少，而有些方案的代码量比较多。
在选择 CSS Reset 方案时，我们需要考虑我们的代码量限制，然后选择一个代码量比较少的方案。
推荐的 CSS Reset 方案
以下是几种比较常用的 CSS Reset 方案：
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 方案之一。它会对所有的 HTML 元素进行重置，以确保在不同的浏览器中，页面的样式是一致的。
以下是 Eric Meyer's Reset CSS 的代码：
-- -------------------- ---- -------
-- ---- ------- ----- --- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-2. Normalize.css
Normalize.css 是一个比较流行的 CSS Reset 方案。它不仅会重置 HTML 元素的默认样式，还会修复一些浏览器的 bug，并且保留一些有用的默认样式。
以下是 Normalize.css 的代码：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ -------------- - ----------- ----------- -------- -- -- - -- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - -------- ----- -
3. Modern CSS Reset
Modern CSS Reset 是一个比较现代的 CSS Reset 方案。它会重置 HTML 元素的默认样式，并且保留一些有用的默认样式。它的代码量比较少，适合用于现代的网站。
以下是 Modern CSS Reset 的代码：
-- -------------------- ---- -------
-- ------ --- ----- --
----- -
------------- -----
----------- -----
-
--
---------
------- -
----------- -----------
-
---- -
---------------- -------
------------ ---------- -------------- -------------------
------ ---- ------- ------- ---------- ------ -----------
---------- -----
------------ ----
------ ------------------
----------------- ----------------
-
---- -
------- --
-
--- --- --- --- --- -- -
----------- --
-------------- -------
------------ ----
------------ ----
-
- -
----------- --
-------------- -----
-
- -
------ --------
---------------- -----
-
--- -
---------- -----
-------- ------
-总结
选择合适的 CSS Reset 方案是非常重要的。我们需要根据自己的需求，选择一个重置程度适合、兼容性好、代码量少的方案。以上介绍了三种常用的 CSS Reset 方案，你可以根据自己的需求选择其中的一种，或者根据自己的需求定制一个适合自己的 CSS Reset 方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655097e87d4982a6eb962ee5