什么是 CSS Reset？
在浏览器中，所有的 HTML 元素都有默认的样式。这些样式不仅仅是不同浏览器之间存在差异，甚至在同一浏览器的不同版本中也会存在差异。
CSS Reset 是一种解决这些差异的方法。它是一个 CSS 文件，能够将所有浏览器中元素的默认样式都统一成一个基础样式，消除不同浏览器之间对样式的处理差异，从而确保页面在不同浏览器之间有一致的外观和行为。
为什么需要 CSS Reset？
在不重置 HTML 元素默认样式的情况下，不同浏览器可能会有截然不同的表现，影响到页面的外观和行为。同时，如果页面中使用的 CSS 样式是基于浏览器默认样式来计算的，这些样式也会受到影响。
例如，当我们在某个浏览器中使用默认的 h1 标题样式时，可能会得到一个大而粗的黑体字，而在另一个浏览器中，可能会得到一个稍微小一点的宋体字，这种差异不仅仅会对页面的外观产生影响，也会对页面的布局和行为产生影响。
如何实现 CSS Reset？
实现 CSS Reset 有两种方法：一种是使用已有的 CSS Reset 工具；另一种是自己编写 CSS Reset 代码。
使用已有的 CSS Reset 工具
目前，有很多已有的 CSS Reset 工具可供使用。这些工具包括：
- Normalize.css: 一个开源的、跨浏览器的 CSS Reset 库，旨在使所有元素的默认外观和行为在所有浏览器中都完全相同。
- Eric Meyer's Reset CSS: 由 CSS Reset 大师 Eric Meyer 编写的 CSS Reset 样式表，其目标是消除浏览器之间的所有差异。
- Yahoo! Reset CSS: 由 Yahoo! 团队编写的 CSS Reset 样式表，简单但功能强大。
使用这些工具只需简单地将其链接到你的 HTML 文件中，例如:
<link href="normalize.css" rel="stylesheet">
自己编写 CSS Reset 代码
如果你愿意，也可以自己编写 CSS Reset 代码。例如，以下是一些基于盒模型的 CSS Reset 代码样例：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- --- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- ---
--------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-这些代码将所有 HTML 元素的外边距（margin）、内边距（padding）和边框（border）设为零，字体大小设为 100%，并设置了垂直对齐方式和透明的背景。这样，我们在编写网页样式时，就可以避免受到浏览器默认样式的影响。
总结
CSS Reset 是一个很有用的工具，可以消除不同浏览器之间对样式的处理差异，确保页面在不同浏览器之间有一致的外观和行为。我们可以使用已有的 CSS Reset 工具，如 Normalize.css、Eric Meyer's Reset CSS 和 Yahoo! Reset CSS，也可以自己编写 CSS Reset 代码。当我们开始编写自己的 CSS 样式时，建议优先考虑使用 CSS Reset 工具来消除浏览器默认样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64619a2c968c7c53b02f4d09