介绍
在开发网页页面时，我们通常需要使用 CSS 样式来控制页面中各个元素的外观，使其适配不同的浏览器和设备。但是不同的浏览器对同样的 CSS 样式有不同的默认样式，这会导致我们的页面在不同的浏览器中呈现不一致的效果。因此，我们需要一个方式来重置浏览器的默认样式，让我们的 CSS 样式能够以一致的方式应用在不同的浏览器上。这就是 CSS Reset 的作用。
在这篇文章中，我们将讨论两种常用的 CSS Reset 方式：CSS Reset 和 normalize.css，它们的性能比较以及如何选择适合你的项目的方式。
CSS Reset
CSS Reset 是一种去除浏览器默认样式的方式。它通过一些通用的样式来重置所有 HTML 元素的默认样式，使其在不同的浏览器上拥有一致的外观。CSS Reset 的代表是 Eric Meyer’s Reset CSS 。
以下是 Eric Meyer’s Reset CSS 的代码示例：
-- -------------------- ---- -------
-- ---- ------- ----- --- ---- - ------------------- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-Eric Meyer’s Reset CSS 中主要通过覆盖浏览器的默认样式，来达到重置的效果。
normalize.css
相比于 CSS Reset，normalize.css 是一种更加温和的去除浏览器默认样式的方式。normalize.css 认为浏览器默认样式在某些情况下非常有用，因此它只重置了一些与跨浏览器的样式不一致的元素。
以下是 normalize.css 的代码示例：
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
---
normalize.css 只会添加一些必要的样式来弥补不同浏览器的样式间的差异。
性能比较
在性能方面，normalize.css 由于只重置了一些需要重置的样式，因此比 CSS Reset 更加轻量级，可以减少页面加载和渲染时间。但是在实际使用中，两者的性能差别并不太大，因为它们的代码量都很小，渲染速度都很快。
如何选择？
在选择使用 CSS Reset 还是 normalize.css 时，需要权衡它们的优劣点，并选择适合你的项目的方式。如果你需要完全控制所有元素的样式，可以选择 CSS Reset；如果你只需要解决跨浏览器样式不一致的问题，可以选择 normalize.css。可以根据你的项目需求来选择适合你的 CSS Reset 方式。
结论
CSS Reset 和 normalize.css 都是非常常用的去除浏览器默认样式的方式。它们的性能差别不是很大，选择适合自己项目需求的方式更为重要。在实际开发中，你可以使用这些 CSS Reset 方式来重置浏览器的默认样式，让你的 CSS 样式在不同的浏览器上呈现一致的效果。
示例代码
以下是一个在 HTML 页面中应用 normalize.css 的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ---------------
----- ---------------- --------------------------------------------------------------------------------
------ ----------------
-- ---- --- ------ -- ---- --
--------
-------
------
---- ---- ---- ------- ---- ---- ---
-------
-------以上示例中，我们通过在 <head> 中引入 normalize.css 来应用它的样式。同时，我们也可以在 <head> 中定义我们自己的 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67750d8f6d66e0f9aaf349b1