在前端开发中，CSS Reset/Normalize.css 是很重要的一环。它们可以帮助我们解决不同浏览器之间的样式差异，提高开发效率。本文将介绍一些优秀的 CSS Reset/Normalize.css，并提供示例代码，希望能对大家有所帮助。
一、CSS Reset 和 Normalize.css 是什么？
1. CSS Reset
CSS Reset 是一种 CSS 文件，它的作用是将所有 HTML 元素的默认样式都设置为相同的值，从而解决浏览器之间的样式差异，让所有浏览器都以同样的方式呈现页面。CSS Reset 的目的是让开发人员从浏览器的默认样式中解放出来，从而更加自由地设计网页。
2. Normalize.css
Normalize.css 是一种 CSS 文件，它的作用是在保留有用的浏览器默认样式的同时，修正了一些常见的浏览器样式 bug，从而使得不同浏览器之间的样式表现更加一致。Normalize.css 的目的是让开发人员在保留有用的默认样式的同时，尽可能地减少样式差异，从而提高开发效率。
二、优秀的 CSS Reset/Normalize.css
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 之一，它的作者是 CSS 大牛 Eric Meyer。这个 Reset 文件非常小巧，只有不到 1KB，但它能够清除所有元素的默认样式，并将它们的样式设置为相同的值，从而实现浏览器的样式一致性。
示例代码：
// javascriptcn.com 代码示例
/* Eric Meyer's Reset CSS */
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;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}2. Normalize.css
Normalize.css 是最受欢迎的 Normalize 文件之一，它的作者是 Nicolas Gallagher 和 Jonathan Neal。这个 Normalize 文件的体积比较大，但它能够修正一些常见的浏览器样式 bug，从而使得不同浏览器之间的样式表现更加一致。
示例代码：
// javascriptcn.com 代码示例
/* Normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
dfn {
font-style: italic;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
display: inline-block;
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}3. Reset.css
Reset.css 是由 Yahoo 开发的一款 CSS Reset 文件，它的体积比较小，但它能够清除所有元素的默认样式，并将它们的样式设置为相同的值，从而实现浏览器的样式一致性。
示例代码：
// javascriptcn.com 代码示例
/* Reset.css */
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;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}三、如何选择合适的 CSS Reset/Normalize.css？
选择合适的 CSS Reset/Normalize.css 需要考虑以下几个因素：
1. 项目需求
不同的项目有不同的需求，有些项目可能需要更加严格的样式控制，有些项目可能需要更加灵活的样式设计。因此，在选择 CSS Reset/Normalize.css 的时候，需要根据项目需求来选择。
2. 兼容性
不同的 CSS Reset/Normalize.css 对于不同的浏览器兼容性也有所不同，有些 Reset 文件可能对一些浏览器不兼容，需要进行适当的兼容性处理。
3. 体积大小
CSS Reset/Normalize.css 的体积大小也是选择的一个因素。体积较小的 Reset 文件可以提高页面加载速度，但可能会牺牲一些样式控制的灵活性。
四、总结
CSS Reset/Normalize.css 是前端开发中不可或缺的一部分，它们可以帮助我们解决不同浏览器之间的样式差异，提高开发效率。在选择 CSS Reset/Normalize.css 的时候，需要考虑项目需求、兼容性和体积大小等因素，选择合适的 Reset 文件可以提高开发效率和页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655eb5e5d2f5e1655d8da5f7