CSS Reset 是 Web 前端开发中常用的一种技术，通过清除各个浏览器默认样式，实现网站效果的统一和规范。本文将介绍目前最流行的 CSS Reset 方法以及其优缺点，并给出具体的示例代码。
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是目前最著名的 CSS Reset 方法之一。该方法通过重设各个 HTML 元素的所有属性，使得网站的样式能够在各种浏览器上呈现一致，从而达到网页初步布局的效果。具体代码如下：
// www.javascriptcn.com code example
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;
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 保留了 HTML 元素之间嵌套的关系，同时它的样式丰富，比较全面。
缺点：重设各个 HTML 元素的所有属性会非常耗费性能，而且如果网站中有用户自定义的样式表，Eric Meyer's Reset CSS 可能会不够灵活。
2. Normalize.css
Normalize.css 是一个相对于 Eric Meyer's Reset CSS 更加轻量级、更加模块化的 CSS Reset 方法。它在 Eric Meyer's Reset 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 (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Remove the hyphenation and justification in text sections in Edge, IE, and Safari.
*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Grouping content
========================================================================== */
/**
* Remove the margin on nested lists in Edge, IE, and Safari.
*/
ul {
margin: 0;
}
/**
* Correct the inheritance and scaling of font size in all browsers.
*/
inherit,
select,
textarea {
font-family: inherit; /* 1 */
font-size: inherit; /* 1 */
line-height: inherit; /* 1 */
}
/* Buttons
========================================================================== */
/**
* Fix the Firefox anomaly when using a button element as a drop-down list control.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}优点：Normalize.css 代码量较小，采用模块化的设计思路，支持在其基础上扩展自己的 CSS 样式。
缺点：作者在 Normalize.css 中更加关注于浏览器间的差异性，可能会对网站的性能造成一定程度的削弱。
3. Modern Normalize
Modern Normalize 是 Normalize.css 的加强版，它针对一些重要的特性进行了更加详细的处理。比如，对于表格、链接、字体、元素的最小宽度等等都进行了统一处理。同时，Modern Normalize 还加入了一些比较新的样式，支持 CSS3 属性的一些前缀处理。具体代码如下：
// www.javascriptcn.com code example
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/* Document
========================================================================== */
/**
* Use a better box model (opinionated).
*/
html {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
/**
* Use a more readable tab size (opinionated).
*/
:root {
-moz-tab-size: 4;
tab-size: 4;
}
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Ensure horizontal scrolling is not possible.
*/
html,
body {
overflow-x: hidden;
}
/* Sections
========================================================================== */
/**
* Stop browsers from using "section" elements in a document outline.
*/
[role="main"],
[role="complementary"] {
display: block;
}
/**
* Add the correct "display" value to "nav" elements.
*/
nav {
display: block;
}
/**
* Remove the margin on nested lists.
*/
ul {
margin: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Add the correct "text-decoration" value to links.
*/
a {
text-decoration: none;
}
/**
* Remove the outline on focused links when they are also active or hovered.
*/
a:matches(:focus-visible,:hover) {
outline: 0;
}
/**
* Add the correct "font-weight" for bold text.
*/
b,
strong {
font-weight: bolder;
}
/**
* Make sure that any "code" elements are still easily readable.
*/
code,
kbd,
samp,
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* The addition of `vertical-align: baseline` makes form control elements align
* properly in Safari 14.
*/
input,
button,
select,
optgroup,
textarea,
legend {
vertical-align: baseline;
}
/* Forms
========================================================================== */
/**
* Reset the default "display" styles for several form elements.
*/
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
::-webkit-search-cancel-button,
::-webkit-search-decoration {
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/**
* Restore the focus styles unset by the previous rule.
*/
input[type="search"]:focus {
outline: auto;
}优点：Modern Normalize 从浏览器的渲染机理入手，进一步完善了 Normalize.css 的代码。
缺点：Modern Normalize 的代码量较大，可能会影响网站的性能。
小结
本文主要介绍了当前比较流行的三种 CSS Reset 方法，分别是 Eric Meyer's Reset CSS、Normalize.css 和 Modern Normalize。对于这三种方法，要根据自己的实际需求和网站规模进行选择，找出最适合自己的 CSS Reset 方法，才能够提高网站的性能、兼容性和规范性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7c7c1a941bf7134deefbb