什么是 CSS Reset？
在编写网页的时候，我们通常会使用 CSS 来控制页面的样式。但是，不同的浏览器对于 HTML 元素的默认样式是不一样的，这就会导致不同的浏览器在显示网页时会产生不同的效果，这就是所谓的浏览器兼容性问题。为了解决这个问题，我们可以使用 CSS Reset。
CSS Reset 是一种用来重置不同浏览器对 HTML 元素默认样式的技术。通过使用 CSS Reset，我们可以确保在不同的浏览器中，页面的样式是一致的。
选择合适的 CSS Reset 方案
在选择 CSS Reset 方案时，我们需要考虑以下几个方面：
1. 重置的程度
不同的 CSS Reset 方案，对于 HTML 元素的默认样式的重置程度是不一样的。有些方案只是针对一些常见的样式进行重置，而有些方案则会对所有的样式进行重置。
如果你希望页面的样式更加自定义化，那么你可以选择重置程度较低的方案。但是，如果你希望页面的样式更加统一，那么你可以选择重置程度较高的方案。
2. 兼容性
不同的 CSS Reset 方案，在不同的浏览器中的兼容性也是不一样的。有些方案会在某些浏览器中出现兼容性问题，而有些方案则可以在大多数浏览器中正常使用。
在选择 CSS Reset 方案时，我们需要考虑我们的网站需要支持哪些浏览器，然后选择一个兼容性比较好的方案。
3. 代码量
不同的 CSS Reset 方案，其代码量也是不一样的。有些方案的代码量比较少，而有些方案的代码量比较多。
在选择 CSS Reset 方案时，我们需要考虑我们的代码量限制，然后选择一个代码量比较少的方案。
推荐的 CSS Reset 方案
以下是几种比较常用的 CSS Reset 方案：
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 方案之一。它会对所有的 HTML 元素进行重置，以确保在不同的浏览器中，页面的样式是一致的。
以下是 Eric Meyer's Reset CSS 的代码：
// 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,
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;
}2. Normalize.css
Normalize.css 是一个比较流行的 CSS Reset 方案。它不仅会重置 HTML 元素的默认样式，还会修复一些浏览器的 bug，并且保留一些有用的默认样式。
以下是 Normalize.css 的代码：
// javascriptcn.com 代码示例
/*! 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 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0; /* 1 */
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}3. Modern CSS Reset
Modern CSS Reset 是一个比较现代的 CSS Reset 方案。它会重置 HTML 元素的默认样式，并且保留一些有用的默认样式。它的代码量比较少，适合用于现代的网站。
以下是 Modern CSS Reset 的代码：
// javascriptcn.com 代码示例
/* Modern CSS Reset */
:root {
--color-text: #333;
--color-bg: #fff;
}
*,
::before,
::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-bg);
}
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 600;
line-height: 1.2;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}总结
选择合适的 CSS Reset 方案是非常重要的。我们需要根据自己的需求，选择一个重置程度适合、兼容性好、代码量少的方案。以上介绍了三种常用的 CSS Reset 方案，你可以根据自己的需求选择其中的一种，或者根据自己的需求定制一个适合自己的 CSS Reset 方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655097e87d4982a6eb962ee5