什么是 CSS Reset？
CSS Reset 是一种预设的样式集合，它可以重置网页所有元素的默认样式，使得各个浏览器在展示页面时的差异更小，让开发者更容易开发出一致性的网页。
为什么要使用 CSS Reset？
在不同的浏览器中，同一元素的默认样式可能存在一些差异，例如不同浏览器的默认字体大小、行高、外边距等等。这些差异可能会导致同一份代码在不同的浏览器中展示出不同的效果，甚至造成某些样式失效。CSS Reset 可以摆脱浏览器的默认样式限制，提高开发效率，并使得布局更加一致，减少兼容性问题。
常用的 CSS Reset 方法
1. 传统 Reset 方法
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}传统 Reset 方法的原理是通过设置所有元素的 margin、padding、border 等为 0，使得它们的默认样式被彻底重置。该方法简单易用，但可能会破坏网页元素原有的样式，导致不可预料的后果。
2. Normalize.css 方法
Normalize.css 是一种比 Reset 方法更为复杂的样式重置库。它通过重置常用元素的样式表现，让不同浏览器在渲染网页时更加一致。Normalize.css 被广泛使用，已为许多开发者所接受。示例代码如下：
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ... */
3. HTML5 Reset 方法
HTML5 Reset 方法基本上和传统 Reset 方法一样，但它会针对 HTML5 新增的特性进行适配。它通过设置元素的样式来使 HTML5 新元素更加符合开发者的要求，同时兼容旧浏览器的工作方式。
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
...总结
CSS Reset 是一种优化网页样式表现的常用方法，它可以使各个浏览器渲染网页时更加统一，避免浏览器样式的差异，提高开发效率并减少兼容性问题。常用的 Reset 方法有传统 Reset、Normalize.css 和 HTML5 Reset 方法，开发者需要根据网页的需求选择最合适的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652c56a27d4982a6ebe24a22