在前端开发中，CSS Reset 库是一个非常重要的工具，它可以帮助我们解决浏览器默认样式的问题，并统一各个浏览器的样式表现。但是，不同的 CSS Reset 库有不同的特点和适用范围，我们需要根据自己的需求选择更加适合自己的库。
本文将比较常见的几个 CSS Reset 库，包括 Normalize.css、Reset.css、Eric Meyer's Reset CSS 等，帮助大家选择更加适合自己的库。
Normalize.css
Normalize.css 是一个非常受欢迎的 CSS Reset 库，它的特点是尽可能地保留浏览器的默认样式，只进行必要的重置。它的代码量很小，只有 8KB 左右，但是可以解决大部分的浏览器兼容性问题。
下面是 Normalize.css 的示例代码：
// www.javascriptcn.com code example
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/* etc. */Reset.css
Reset.css 是另一个非常常见的 CSS Reset 库，它的特点是将所有的样式都重置为 0 或者默认值，从而消除浏览器默认样式的影响。Reset.css 的代码量比较大，约为 2KB 左右。
下面是 Reset.css 的示例代码：
// www.javascriptcn.com code example
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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,
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;
}
/* 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;
}Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是由 CSS 专家 Eric Meyer 编写的 CSS Reset 库，它的特点是比较彻底，将所有的样式都进行了重置。Eric Meyer's Reset CSS 的代码量比较大，约为 2KB 左右。
下面是 Eric Meyer's Reset CSS 的示例代码：
// www.javascriptcn.com code example
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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 库
以上三个 CSS Reset 库都有各自的特点和适用范围，我们需要根据自己的需求选择更加适合自己的库。
如果你希望尽可能地保留浏览器的默认样式，只进行必要的重置，可以选择 Normalize.css；如果你希望将所有的样式都重置为 0 或者默认值，消除浏览器默认样式的影响，可以选择 Reset.css；如果你希望彻底地重置所有的样式，可以选择 Eric Meyer's Reset CSS。
无论选择哪个 CSS Reset 库，我们都需要注意它的代码质量和兼容性，以保证网站的稳定性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1672ca941bf71342fd714