什么是 CSS Reset
在编写网页样式时，不同浏览器对 HTML 标签的默认样式可能存在细微差异，这可能影响到网页在不同浏览器下的展示效果。为解决这一问题，开发者们想出了一种叫做 CSS Reset 的方法。CSS Reset 是一种适用于所有浏览器的代码清单，可以将所有 HTML 标签的默认样式清除，从而统一各浏览器的样式表现。
CSS Reset 的重要性
CSS Reset 对于我们前端工程师们来说非常重要，因为它能够确保我们的样式代码能够在不同浏览器下得到一致的展示效果。如果没有使用 CSS Reset，我们编写的样式代码可能会因为默认样式的差异而表现出意想不到的效果。此外，使用 CSS Reset 也能避免各端的浏览器因为默认样式而发生样式错位或重叠的现象。
如何选择合适的 CSS Reset
目前有不少的 CSS Reset 方案，不同的方案对默认样式的清除程度和清除目标略有差别。在团队协作时，我们应该根据具体项目的场景选择一个合适的 CSS Reset 方案。下面介绍一些常见的 CSS Reset 方案。
Eric Meyer Reset
Eric Meyer Reset 初衷是为了消除所有元素的 margin 和 padding，从而使每个元素的展示效果更加统一。它比较适合一些注重细节和设计的项目。
-- -------------------- ---- -------
-- ---- ------- ----- --- ---- - ----------------------------------------- - -------- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
-------- --
--------- --
-------- --
----------- -----
------ --------
---------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
--------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-Normalize.css
Normalize.css 相比于 Eric Meyer Reset 更加符合大多数前端开发者的需求，它旨在为所有浏览器提供一个统一的样式表现，并且尽可能的保留有通用意义的标签样式。
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------- ----- -- - -- -------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - -------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - --------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ----------- ---- -------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ----- -- ------- -------- --- ------- -- -- --- -- --- -- --- -- -- - -------- -- - --- - ------ --- ------ -- ------ ----- -- -- ---- -- -- --- -- -- - -------- -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- -- - ----------- ---- -- - -- -------- ----- -- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ------------------ ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - --------------- ----- -- - -- ----------------- ---------- -- - -- ----------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------- ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ----------- ---- -- - -- -------- -- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ----------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ----------- ---- ------------- -- ---------- --------- ---------------- --------- - --- - -------- -------- - --- - ----- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - -------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------- -------- -- - -- ----------- ----- -- - -- ------------- ----- -- - -- -------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- ---------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- ---------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - -------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - -------------- ----- --------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ---- -- -------- -- --------------- - --------- --- ------ ----------- - --- - ------ --- ---------- -------- ----- -- ------ --- -------- -- --------------------------- - -------------------- ------- -- - -- - -- ------ -------------------------------------------------------------------------- -- --- - ------ --- ------- -- --- --------- -- ----- - ----------------- --------- ---------------- -- - --- - ------- --- ---- -------- -- ---- --- --- -- --- -- - ---------- ----- - --- - -- ------- --- --- -------- --------- -- --- --------- - -- ------- --- --- ---------- ----- -- --- --------- -- -- - ------------------ ----------- ------------ ----- -- - -- ------------ ----- - -- ----- --- ----- -------------------------------------------------------------------------- -- --- - ------ --- ------- ------ -- --- --------- -- -- - -------- -- --------- -- - --- - ------ --- ------- ------ -- --- --------- -- -- - -------- -- --------- -- - --- - ---- ------------ -- -- - ------------- ----- - -- - ------------- -- - --- - ------ --- ------- ---- ------ -- -------- -- ---------------- ------------------ ----------------- - ----------------- ----- - --- - ------- --- ---- ----------- -- ------- -- --------------- - --- ----------------- - --- ----------------- - -- - ------------- ---- - --- - -- ------- --- ---- -------- -- ---- --- --- - -- ------- --- ----- ----------- ---- ---------- -------- -- --- - -- ------ --- ------- -- ---------- --- --- ------ --- ---- ---- ---- --- - ---------- -------- -- --- --------- -- ------ - --------- ------ ----------- ----- ------------- ------- -- - -- ------- -------- -- - -- --------- -- -- - -- - --- - --- --- ------- -------- --------- -- ------ --- -------- -- -------- - ---------------- --------- - --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - ---------- ----- - --- - -- --- --- ------- --- ------ -- -- --- - -- ------ --- ------- -- -- --- -- ------------------ -------------- - ------------ ----------- -- - -- --------- -- -- - -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - -------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - -------------------- ---------- -- - -- ---------------- ----- -- - -- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - -------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - -------------------- ------- -- - -- ------ -------- -- - -- - -- ------ -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- --- -- -------- - --------- ----- -
其他的 Reset 方案
除上述两种 Reset 方案外，还有一些其他的 Reset 方案，如 Yahoo Reset 和 HTML5 Reset 等等。这些 Reset 方案也有一些适用于特定场景的特别的解决方案。
总结
在团队协作的过程中，选择合适的 CSS Reset 方案是十分必要的，因为它能够减少浏览器默认样式带来的差异，确保网页的样式表现更加统一。在使用 CSS Reset 方案时，我们需要结合具体项目的场景来选择合适的 Reset 方案，而不应一味追求某一方案的潮流或热门程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc9a725ad90b6d0429dd02