简介
在 Web 设计中，我们常常会遇到界面样式不统一、HTML 元素默认样式和浏览器兼容性问题等困境。为了解决这些问题，CSS Reset 被诞生出来。CSS Reset 是一种可以帮助我们消除默认样式并统一样式的 CSS 技术，它能够兼容大多数浏览器，并且非常易于使用。
什么是 CSS Reset？
CSS Reset 是一种用于消除浏览器默认样式的 CSS 文件，它可以让你定义你自己的样式而不必担心默认样式影响你的设计。通过使用 CSS Reset，可以简化开发流程，减少浏览器差异性，并提供一致的基础样式。
CSS Reset 的目的是让开发者在开始设计后能够自己定义元素的默认样式，从而避免了使用浏览器默认的样式表，能够使开发者更加自由和灵活。
为什么需要 CSS Reset？
在 Web 设计中，浏览器会默认生成元素的样式，这些样式往往会干扰开发者的设计。开发者需要消除默认样式，才能获得更简单的样式设计。通过使用 CSS Reset，相当于重置了浏览器的默认样式，让你可以自定义更清晰、更简单的设计样式。
此外，由于不同浏览器之间的 HTML/CSS 实现差异，有些元素在不同浏览器之间的默认样式还会存在不同，这会导致一些控制界面样式的问题。CSS Reset 可以对这种问题进行处理，保证网站的跨浏览器兼容性。
如何使用 CSS Reset？
CSS Reset 的使用非常简单，只需要在样式表中引入即可。常见的 CSS Reset 样式表有 Eric Meyer 的 Reset CSS 和 Normalize.css 两种，我主要介绍 Normalize.css。
<head> <link rel="stylesheet" href="normalize.css"> </head>
接下来，我们来看一下 Normalize.css 是如何工作的。
Normalize.css
Normalize.css 是一款在默认 HTML 样式上提供跨浏览器一致性的 CSS Reset 库。与大部分 CSS Reset 库不同，Normalize.css 不是简单地删除了所有浏览器的默认样式。相反，它为每个 HTML 元素打补丁，使其更符合现代标准。
Normalize.css 工作原理：
- 打补丁：使用合适的样式声明，修复每个元素的浏览器兼容性问题；
- 设置默认值：使用合适的样式声明，保留有用的默认值，例如 HTML5
<progress>元素的默认样式； - 修复 bug：在某些元素上修复常见的浏览器自带的 bug。
Normalize.css 最大的优点就是不会破坏 HTML 的语义，只是为了让浏览器在默认的 HTML 上无差异化，符合 W3C 标准。Normalize.css 修复了所有浏览器之间的差异，它为我们提供了一种适用于大多数 Web 项目的 CSS Reset 解决方案。
总结
在 Web 设计中，CSS Reset 是一种非常有用的工具。它可以为我们解决样式不统一、兼容性问题等困难，使我们在开发界面时更加灵活。使用 Normalize.css 这样的 CSS Reset 库可以让我们快速的开发出一致性的样式，提高开发效率。但需要注意的是，CSS Reset 不应该被滥用，特别是在项目中涉及到重构等大规模操作时，应先做充分的调研和测试，避免再造轮子，降低项目复杂度。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8e2735ad90b6d0414fcbe