在进行前端开发的过程中，我们经常会遇到一些浏览器的默认样式会影响我们自己设定的样式，这时候就需要用到 CSS Reset，用于重置浏览器的默认样式，让自己定义的样式得以正确应用。本文将详细介绍几种常见的 CSS Reset，并提供示例代码。
1. Normalize.css
Normalize.css 是一个非常流行的 CSS Reset 库，它的目标是让所有浏览器的样式表尽可能的一致。具体来说，它会重置许多元素的默认样式，并根据最新的 web 标准来修正一些浏览器兼容性问题，比如文本字重、button 样式等，同时也考虑到了响应式布局。
以下是使用 Normalize.css 的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- ------------------- ------- ------ ------------ ----------- ------- -------
2. Reset.css
Reset.css 是最早的 CSS Reset 库之一，它的原理是将所有元素的默认样式都置为 0。 Reset.css可以帮我们更好的掌握页面的布局，但它在保留原生 HTML 元素基础样式的同时，也绝对是 CSS 代码的啰嗦。
以下是使用 Reset.css 的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- ------------------- ------- ------ ------------ ----------- ------- -------
3. Eric Meyer's CSS Reset
Eric Meyer's CSS Reset 是另一个常见的 CSS Reset 库，和 Reset.css 不同，它的目标是将所有浏览器的默认样式都恢复到了一种基准状态，然后再根据需要定义具体样式。这意味着，我们需要先定义一些基本的样式，然后再根据需要继续添加特定的样式。
以下是使用 Eric Meyer's CSS Reset 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ----------------------------
-------
-- ---- --
---- -
------------ ------ -----------
-
-- -
---------- -----
------ -----
-
-- ---- --
-- --- --
--------
-------------------
-------
------
------------
-----------
-------
-------总结
在进行前端开发的过程中，使用 CSS Reset 能够更好的掌控页面的样式，让我们的代码更加规范和易维护。不同的 CSS Reset 库都有各自的优缺点，开发者可以按照自己的需要选择使用。但是需要注意，在选择之后，应该深入了解该 Reset 库的原理和功能，以确保能够正确使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522862195b1f8cacda039ba