前言
CSS Reset 是许多前端开发者在开发项目时都会用到的一种技术。它可以校正不同浏览器之间的默认样式，以便更好地定制页面样式。然而，由于 CSS Reset 的实现方式存在多样性，使用不同的 CSS Reset 方法会对页面布局与样式表现产生影响。本文将会讲解不同类型的 CSS Reset 实现的差异，说明每种方法的优缺点，提供指导开发者选择合适的 CSS Reset 方式。
CSS Reset 的实现
1. YUI Reset CSS
经典的 YUI Reset CSS 是最早推荐和使用的 CSS Reset 方法之一。由于它比较彻底的重置默认样式，所以通常会导致 HTML 元素失去大量的默认样式。 对于需要自己实现的样式表，该方法可能是不错的选择。但是 YUI Reset CSS 的样式极少，因此在重写样式时需要进行大量的工作。由于样式比较少，该方法通常对网页的性能影响较小。
-- -------------------- ---- -------
---- -
------ -----
----------- -----
-
-------------------------------------------------
----------------------------------------------- -
------- --
-------- --
-
----- -
---------------- ---------
--------------- --
-
------------ -
------- --
-
------------------------------------------------------- -
----------- --------
------------ --------
-
------- -
---------------- -----
-
-- -
----------- -----
-
---------- -
----------- -----
-
----------------- -
---------- -----
------------ -------
-
---------------- -
-------- ---
-
------------ -
------- --
------------- -------
-
--- -
--------------- ---------
-
--- -
--------------- ---------
-
--------------------- -
------------ --------
---------- --------
------------ --------
------------ --------
-2. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是其中比较流行的一种 CSS Reset 方法。它不仅仅重置了常规常规的样式，还包括了一些关键的样式表。此外，与传统的 CSS Reset 方法不同的是，该方法特别注意了外联与内联样式的差异，让外联样式在浏览器中呈现整齐且一致的显现效果。
实现 Eric Meyer's Reset CSS 应该考虑到在关闭浏览器缓存时会花费一些额外的加载时间，样式也更为深入并详细，这可能会对网页的性能造成一定的影响。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- ----------- ----- ------ -------- ---------------- --------- - -- ----------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - --------- ------ - ---- - ------------- -- - --- -- - ------------ ----- - ----------- - - -------- ----- - ------------------ ----------------- --------- ------- - --------- --- --------- ----- - ----- - ----------------- --------- ---------------- -- -
3. Normalize.css
Normalize.css 是深度重写 webkit 样式以及重写来自不同浏览器的应用程序默认样式的一种 CSS Reset 方法。相对于前两种方法，Normalize.css 的方法更为“柔和”，以平衡浏览器之间的样式差异。它重定了常规标签的默认样式，而无需清除任何属性。该方法的优点是它极大地减少了实际清除的 CSS 样式，并解决了许多常见的 CSS 问题，因此通常是开发人员的首选。
与使用 Eric Meyer's Reset CSS 方法时相比，Normalize.css 最大的优点是它保留了原始浏览器中的一些样式，因此默认出现的样式比传统的 CSS Reset 要好得多。但是，需要注意的是，由于这种方法与浏览器自带的样式表有所不同，因此可能会造成某些提交崩溃的页面部分。
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------- ------ --- ---- ------- -- --- --------- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - ------ --- ------ ------- ------ ----- -- --- --------- -- -- --- -- --- -- --- -- -- - ------- -- - --- - ------- --- ------ --- ------- -- ------------ --------- -- ------ - ------- --- ----- - --- - -- ------- --- --- ---- ---- ------ -- --- --------- - -- ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- -------------- - ---------- -- -- - -- ------------ ---- -- - -- - --- - ------- ---------- -------- -- --- --------- -- -------- - ------- --------- - --- - -- ------ --- ------- -------- --------- -- -- ---- - -- ------- ----------- --- --------- -- --- --------- -- --- - --------- ----- -- - -- ------------ --------- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ------------ ------------------------- - ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---------- -- ------- ----- --- ------- -- ----- ---- ----- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - -- ------- ---- ----------- -- ------- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- -- - -- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - --- - ------ --- ------- ------- --- ------- -- --- -------- -------------- -- -------- - -------------- -- ------------ ---- --------------- ---- ------------- ---- -------------- ---- - --- - ------ --- ------ --- ------ -- --- -------- -------------- -- -------- - ------- --- ----- -------- ------- - ---- -------- ------ ------- ------- - ------ - ----------- ----------- -- - -- ------ -------- -- - -- -------- ------ -- - -- ---------- ----- -- - -- -------- -- -- - -- ------------ ------- -- - -- - --- - --- --- ------- -------- --------- -- ------- -------- --- ------ -- -------- - --------------- --------- - --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - --------- ----- - --- - -- --- --- ------- --- ------ -- -- --- - -- ------ --- ------- -- -- --- -- ------------------ -------------- - ----------- ----------- -- - -- -------- -- -- - -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- -
结论
在前端开发过程中，CSS Reset 是一个必备技术，因为它可以为我们提供比浏览器默认样式更好的样式，从而更好地控制页面元素。然而，不同的 CSS Reset 方法会产生差异。在进行选择的时候，应考虑到页面展现与性能考虑。如果追求较为彻底、清空所有默认样式建议使用 YUI Reset CSS；如果想平衡不同浏览器的样式，接受少量样式的修改，建议使用 Normalize.css；而该比较流行的 Eric Meyer's Reset CSS，则中等切实适合大多数开发情况。最后，选择 CSS Reset 的时候应根据项目实际需求来对其特色与不足进行分析，做出选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c64aba336082f2541088b