在前端开发过程中，我们经常会使用 reset.css 和 normalize.css 来解决浏览器间的兼容性问题。这两个工具都是用来重置浏览器默认样式的，但它们的适用场景却有所不同。
reset.css 的适用场景
reset.css 利用 css 的继承性，将所有 html 标签的默认样式都设置成空，以达到将浏览器的默认样式完全重置的效果。这使得我们可以自由的定义并应用我们自己的样式，在各个浏览器中保持样式的一致性。
reset.css 适用于以下场景：
- 开发需要自定义样式的项目。在这种情况下，我们需要一个初始状态，从这个初始状态开始定义样式，而不是使用浏览器自带的默认样式。
- 对于只需要简单样式的静态网站或快速原型的项目。在这种情况下，我们不必非常关注样式的细节。
以下是一个简单的 reset.css 示例代码：
// javascriptcn.com 代码示例
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
thead,
tbody,
tfoot,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}normalize.css 的适用场景
normalize.css 的目标是在不影响实际设计的前提下，尽可能的让不同浏览器的渲染结果尽量一致。它会修补一些浏览器自身的 bug，并对一些元素的样式进行重置和标准化，以确保在各个浏览器中呈现相似的视觉效果。
normalize.css 适用于以下场景：
- 使用 css 框架（如 Bootstrap、Foundation）。在这种情况下，我们需要确保框架中的样式在各个浏览器中都表现一致。
- 原型或测试网站。在这种情况下，我们希望不同浏览器看到的结果越接近越好，以便于测试和验证。
以下是一个简单的 normalize.css 示例代码：
// javascriptcn.com 代码示例
/* normalize.css */
/**
* 1. 清除浏览器的默认样式和一些普遍存在的 bug。
* 2. 保留较少的默认样式，并尽可能与 W3C 规范相符。
* 3. 增强易用性和可访问性h。
* 4. 一般样式重置和标准化。
*/
/* Set core variables */
@import url("https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css");总结
在选择 reset.css 和 normalize.css 之前，我们需要了解它们的适用场景。如果要自己定义项目的样式，或需要比较简单的静态网站或快速原型的项目，我们可以选择使用 reset.css；如果需要保证不同浏览器的渲染结果尽可能一致，或使用 css 框架时，我们可以选择使用 normalize.css。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654380827d4982a6ebd4bede