在编写前端样式的过程中，我们通常会遇到相同的问题：浏览器默认样式的存在。这些默认样式既不美观，也会导致兼容性问题。为了解决这个问题，我们可以使用 CSS Reset。CSS Reset 是通过一系列定义，去除浏览器默认样式的技术手段。
CSS Resets 的分类
有很多种 CSS Resets，根据它们对页面元素的重置程度，可以分为三类。
针对特定元素的 Resets
这种 Reset 只对特定的元素进行样式重置，比如对ul,ol等特定元素的样式进行重置。
针对页面全局的 Resets
这种 Reset 将页面所有元素的默认样式进行重置。这样做可以确保所有元素都具有相同的基本样式，以便更容易地进行设计和开发。
基于 Normalize.css 的 Resets
Normalize.css 是一种不同于传统 CSS Reset 的 CSS 框架。 Normalize.css 会将所有元素的默认样式中存在的差异都进行消除。该框架能够使页面元素更加一致、更具可定制性和更易于管理。
如何选择和使用 CSS Resets
针对不同的项目和需求，我们需要采用不同的 CSS Resets。
如果对页面的设计和开发要求不高，可以选择一些针对特定元素的 Resets，这些 Resets 会对指定的元素进行重置。例如：
ul,li,h1,h2,h3,h4,p {
margin: 0;
padding: 0;
list-style: none;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}如果需要一种完整的基于 Normalize.css 的 Reset，可以在页面的 head 中添加如下代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
需要注意的是，如果我们同时使用多种 CSS Resets，可能会产生不必要的冲突，只有在明确的需求和场景下，才应考虑使用多种 Resets。
总结
CSS Reset 可以帮助我们解决浏览器默认样式的问题，让我们更加容易对页面样式进行设计和开发。选择不同的 Resets 依据需求进行使用，同时需要避免多种 Resets 之间的冲突。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65940e17eb4cecbf2d8a2293