CSS Reset 是一个前端开发中经常用到的工具，它的任务是将浏览器对 HTML 元素的默认样式进行重置，目的是为了让所有浏览器展现出一致的样式，即使存在浏览器差异，也可以减少样式修正的工作量。但如何选择适合自己的 CSS Reset 方案，却是很多前端开发者不得不面对的问题。在此，我们将介绍不同的 CSS Reset 方案，并帮助你选择适合自己的方案。
normalize.css
normalize.css 是很多开发者首选的 CSS Reset 方案。它是由 Nicolas Gallagher 于 2011 年创建的，这个方案致力于消除浏览器之间标签的差异，使默认样式在不同的浏览器中保持一致。与其他 reset 方案相比，它不仅对简单而常见的元素进行了重置，还对很多其他元素进行了标准化的样式设置。因此，你不需要再去处理一些特殊的样式情况。但需要注意的是，normalize.css 并不能完全清除浏览器默认样式，在样式上，normalize.css 依然存在一些继承样式。normalize.css 的代码如下：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- ---------------------------- ------------ - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - ------- ----- - -- - -- --------- -------- - --- - ---- --- -------- -- --- - ------ -------- -- --------- -- ---- --- ------ -- --- -- ----------------- - --------- -------- - --- - ------ --- ------- -------- --------- -- --- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - ------------------------------------------ - ------------------- ----- - --- - -- ------- --- ---- -------- -- ---- --- --- - -- ------ --- ----- ------- --- ------ ------ ------ -- ------ --- ------- -- --------------------------------------- - --------- ------- -- - -- -------- -- -- - -- ----------- ----- -- - -- - ---------------------------------------------- ------------------------------------------ - ------------------- ----- - --- - ------ --- ------- -------- --------- -- ------- -------- --- ------ -- -------------- - --------------- ------- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------ -- ----- -- ---- --- -------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- -
reset.css
reset.css 是 Eric Meyer 创建的一个 CSS Reset 方案。相较于 normalize.css，reset.css 对所有元素进行了重置，例如，独立的样式表包含类似于下面这样的样式：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
可以看到，reset.css 的代码可以清除所有的浏览器默认元素样式，显然，它的重置范围更广泛，其中大量的样式都无法通过 normalize.css 进行操作。但值得注意的是，reset.css 会导致很多元素失去预设的基本样式，需要经过重新设置才能正常使用。
其他方案
除了 normalize.css 和 reset.css 这两个主流方案之外，还有一些其他的 CSS Reset 方案，例如：
这些方案也可根据需求选择。
了解了不同的 CSS Reset 方案后，如何选择适合自己的呢？我们总结了几个建议：
- 对于跨浏览器相同的样式可选择使用 normalize.css；
- 对于更广泛的样式清除需求，可以选择 reset.css；
- 根据自身需要自行定制或修改 CSS Reset 方案；
- 选择已经得到广泛应用并持续更新维护的方案；
- 建议使用浏览器兼容性好、支持范围广的方案。
示例代码
下面是使用 normalize.css 和 reset.css 的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------- ----- --------------
----- ---------------- -------------------- --
----- ---------------- ---------------- --
-------
-- --------- ---- ------ --
---- -
------------ ------ -----------
---------- -----
------------ ----
------ -----
-
--------
-------
------
---------- -----------
---
----- ----- ----- --- ---- ----------- ----------- ----- ------- -------
----- --- ---- ----------- -------- --------- ---- ---- ----------
------- --- ---- ------ --------- ------ -------- ----- --- --------
-----
----
-------
-------希望以上的介绍能帮助你选择适合的 CSS Reset 方案，并减少你的样式修正工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0cf9748841e9894cfd75d