什么是CSS Reset？
CSS Reset是一种方法，用于统一浏览器默认样式以及不同浏览器之间的样式差异。CSS Reset通常是通过重置HTML元素的样式来实现的，然后在样式表中重新定义样式。
为什么需要CSS Reset？
不同的浏览器，甚至同一浏览器的不同版本，都有自己的默认样式。这可能导致你的网站在不同的浏览器中显示不一样的外观，使你的网站失去一致性。而CSS Reset的作用就是把浏览器默认的样式进行重置，从而在多浏览器中显示样式保持一致。
CSS Reset的缺点
虽然CSS Reset可以为我们带来很多好处，但它的确也存在某些缺点。比如在重置一些默认的样式时，可能会给我们带来一些额外的工作量。一些UI组件（如按钮、下拉菜单）可能会在某些情况下无法正常工作，因为重置的样式可能会影响其工作。
CSS Reset的实现方法
Eric Meyer法
可以把以下CSS样式定义为CSS Reset（以Eric Meyer’s reset为例）：
// javascriptcn.com 代码示例
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, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Normalize.css法
在Eric Meyer Reset的基础上，Normalize.css在一定程度上改进了前者在reset全局样式时的不足之处，相较于Eric Meyer Reset，Normalize.css更具备可定制性，它并不是把所有样式都清零，而是把各种元素的表现统一化，尤其是在HTML5标签出来后，对于这些新的元素进行初始化样式，弥补了很多浏览器在对待这些新标签的不同处理方式，而且它被公认为专业且高效的CSS Reset库。
可以从官网下载最新版本。
如何使用CSS Reset？
在使用CSS Reset之前，需要认真考虑该如何应用Reset到您的项目中。您可以将CSS Reset添加到全局样式表中，也可以针对每个HTML页面进行样式重置。
在样式表中，可以根据需要选择使用Eric Meyer Reset或Normalize.css。如果您愿意，您也可以创建自己的自定义reset。
以Eric Meyer Reset为例，可以在样式表中加入以下代码：
// javascriptcn.com 代码示例
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, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}然后在html文件中链接该样式表：
<link rel="stylesheet" href="css/reset.css">
CSS Reset的示例
以下是一个使用Eric Meyer Reset的示例：
index.html
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Reset Demo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Site!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus perspiciatis qui fugiat sapiente amet ex!</p>
<img src="img/sample-image.jpg" alt="Sample Image">
</body>
</html>reset.css
// javascriptcn.com 代码示例
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, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}style.css
// javascriptcn.com 代码示例
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
margin-bottom: 20px;
font-size: 36px;
font-weight: bold;
text-align: center;
}
p {
margin-bottom: 20px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}总结：
CSS Reset虽然存在一些缺点，但它可以确保不同浏览器下网站的样式保持统一，从而提供更好的用户体验。鉴于Eric Meyer Reset可能导致UI组件的问题，推荐使用Normalize.css，或者是自己编写适合自己网站的CSS Reset。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f578f7d4982a6eb074f18