在前端开发中，CSS样式是一个非常重要的组成部分。不同的浏览器或者设备可能会对默认样式有差异，为了保证页面在不同环境下的一致性，我们常常需要使用CSS Reset来清除默认样式。
什么是 CSS Reset？
CSS Reset 是一种通过重置CSS的样式，来保证不同浏览器或设备上显示的一致性的技术。CSS Reset 会去掉各种 HTML 元素的默认样式，例如默认的margin、padding、font-size等。
CSS Reset 的主要作用是保证页面在不同浏览器或设备上呈现出的样式一致性，避免因为默认样式不同而导致的排版错乱。
常见的 CSS Reset
目前比较常见的 CSS Reset 包括 Normalize.css 和 Reset.css。
Normalize.css
Normalize.css 是一种让不同浏览器在渲染页面时保持尽量一致的 CSS Reset 库。它不仅重置了各种 HTML 元素的样式，还修复了一些浏览器本身存在的问题，同时也提供了一些常用的样式工具类。
下面是对比 Normalize.css 前后的差异：
不使用 Normalize.css：
-- -------------------- ---- -------
---- -
---------- -----
-
---- -
------- --
-------- --
-
-- -
---------- -----
------- --
-
- -
------ -----
---------------- -----
-
------ -
------- --
----------------- -----
-使用 Normalize.css：
-- -------------------- ---- -------
---- -
---------- -----
-
---- -
------- --
------------ -----------
-
-- -
---------- ----
------- ------ --
-
- -
------ --------
---------------- -----
----------------- ------------
-
------ -
------- --- ----- -----
----------------- -----
-可以看到，使用 Normalize.css 后，各个元素的样式更为统一，例如 h1 的样式更加规范，a 的样式也更加一致。
Reset.css
Reset.css 是一种将所有HTML标签的默认样式设为零，从而达到在不同浏览器、不同操作系统下样式的统一的 CSS Reset 库。
下面是对比 Reset.css 前后的差异：
不使用 Reset.css：
-- -------------------- ---- -------
---- -
---------- -----
-
---- -
------- ----
-
-- -
---------- ----
------- ------ --
-
- -
------ -----
---------------- -----
-
------ -
------- --
----------------- -----
-使用 Reset.css：
-- -------------------- ---- -------
----- ---- -
------- --
-------- --
-
--- --- --- --- --- -- -
---------- ----
------- --
-
- -
------ --------
---------------- -----
-
------ -
------- -----
----------- ------------
-可以看到，使用 Reset.css 后，各个元素的样式都被清零，需要重新设置，例如 h1 的样式需要重新设置 font-size 和 margin。
总结
在开发前端页面时，为了保证页面在不同环境下的呈现一致性，我们需要使用 CSS Reset 来去除默认样式。常见的 CSS Reset 包括 Normalize.css 和 Reset.css，它们的差异在于清除的默认样式不同。
需要注意的是，使用 Reset.css 后，需要重新设置各个元素的样式，而使用 Normalize.css 后，样式更为统一，但也需要针对性地修改一些样式细节。
因此，在使用 CSS Reset 时，需要根据具体情况选择合适的 Reset 方案，并在重置样式后，根据具体情况针对性地设置样式，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466bc50968c7c53b072f37e