什么是 CSS Reset？
在编写 web 页面时，浏览器默认带有一些样式，不同浏览器之间也会存在差异，这会影响到页面的一致性和美观性。为了解决这个问题，出现了 CSS Reset。CSS Reset 就是一组预设的 CSS 规则，它们能够重置浏览器默认样式并将每个元素的样式设置为一个更加一致的状态。使用 CSS Reset，我们可以将所有浏览器默认样式全部清除，从而控制元素的样式，让页面看上去更加美观和统一。
为什么需要使用 CSS Reset？
在 web 页面开发中，由于浏览器之间存在差异和默认样式，可能会出现以下问题：
- 页面元素在不同浏览器之间显示效果不一致；
- 重复编写样式，造成样式冲突，导致页面布局混乱；
- 页面样式无法满足设计师的需求，无法实现设计师所设计的效果。
使用 CSS Reset 可以帮助我们解决这些问题，清除默认样式，让页面元素的样式更加统一，减少浏览器差异，帮助我们更好地控制页面布局和样式。
如何使用 CSS Reset？
下面将介绍两种常用的 CSS Reset 方法：
1. 使用 Normalize.css
Normalize.css 是一个流行的 CSS Reset 库，它通过重新定义许多标准元素的默认样式，解决了浏览器间的差异性，并改进了大多数元素的布局。它包含了许多与默认样式相关的 bug 修复和浏览器兼容性问题。你可以在官方网站中查看并下载 Normalize.css。
使用 Normalize.css 相对来说比较简单，它只需要在 CSS 文件中引入就可以了：
/*引入 Normalize.css*/ <link href="normalize.css" rel="stylesheet">
2. 使用自定义 Reset.css
Normalize.css 可以解决大部分问题，但有些开发者希望更加精细地控制页面的样式。这时候，你可以自己定义 Reset.css。
/**
* reset.css: 重置浏览器默认样式
* 开发者: [你的名字]
* 邮箱: [你的邮箱]
* 版本: 1.0.0
*/
/* 重置页面元素的默认样式 */
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,
font,
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,
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;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* 重置标题字体大小 */
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
/* 重置列表样式 */
ol, ul {
list-style:none;
}
/* 重置链接默认样式 */
a {
text-decoration:none;
color: inherit;
cursor: pointer;
}
/* 重置图片默认样式 */
img {
border:none;
vertical-align:top;
}
/* 重置表格默认样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置表单默认样式 */
button,
input,
optgroup,
select,
textarea {
font-size:100%;
margin:0;
vertical-align:baseline;
}
/* 重新定义标签默认样式 */
button,
input {
*overflow:visible;
}
/* 重置 button 标签样式 */
button {
border:none;
cursor:pointer;
background:none;
outline:none;
}
/* 重新定义文本输入框和文字域基本样式 */
input[type="text"],
input[type="password"],
input[type="file"],
textarea {
vertical-align:middle;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
font-style:inherit;
color:inherit;
}
/* 重新定义富媒体标签基本样式 */
audio,
video {
display:inline-block;
vertical-align:baseline;
}
/* 重新定义错误提示样式 */
[hidden], template {
display:none;
}使用自定义的 Reset.css 时，我们只需在页面的 head 标签中引入 reset.css 即可：
/*引入 Reset.css*/ <link href="reset.css" rel="stylesheet">
总结
CSS Reset 是我们在开发 web 页面时，必须了解的一个重要知识点，不同的 Reset.css 对应的浏览器问题不同，使用前需选择适合的方法，这样才能更好地解决 layout 和 style 的问题。你可以选择使用 Normalize.css 或自定义 Reset.css，选择合适的方法才能使网站的样式更加统一，减少浏览器之间的差异，展示更好的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b23f73add4f0e0ffb6f310