CSS Reset 是一种前端开发中常用的技术，它可以帮助我们消除 HTML 文档中默认样式之间的差异，从而使页面在不同浏览器和设备上呈现出一致的效果。在本文中，我们将深入探讨 CSS Reset 的原理、用法以及一些常用的示例代码，并希望能给读者带来指导意义和实用价值。
原理
当我们使用浏览器来访问不同的网站时，它们的页面看起来风格迥异，部分原因是 HTML 元素的默认样式存在差异。例如，一个 h1 标签在某些浏览器上可能会有较大的字体尺寸和上下边距，而在另一些浏览器上则没有。这些差异会给我们的页面带来视觉上的不一致性，这就是 CSS Reset 的工作原理所在。
CSS Reset 的基本思路就是将所有 HTML 元素的默认样式置为一致，从而使页面的基本样式风格统一，方便后续的页面设计和排版工作。比较流行的 CSS Reset 方案有 Eric Meyer Resets、Normalize.css 和 Yahoo! Reset CSS 等，它们都为我们提供了可靠的 CSS Reset 解决方案。
用法
使用 CSS Reset 的过程很简单，只需要在 HTML 文档的 head 标签内引入选定的 CSS Reset 样式表即可，如下所示：
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head>
其中 reset.css 是我们选择的 CSS Reset 样式表，相关的 CSS 规则在此文件中定义。注意，CSS Reset 样式表应该放在其他样式表的前面，以确保它可以正确地覆盖默认样式。
在使用 CSS Reset 的过程中，我们还需要注意一些细节。由于这些 Reset 样式会影响我们的整个页面，因此应该选择一个适合自己的 Reset 样式表，同时也需要对页面设计和排版进行一些合理的调整。例如，Eric Meyer Resets 的 Reset 样式表在重置了按钮、表格等元素的样式之后，可能还需要根据自己的需求进行定制。
常用示例
以下是一些常用的 CSS Reset 代码片段，它们可以帮助我们快速实现常规的 CSS Reset 效果。
Normalize.css
Normalize.css 是最常用和最受欢迎的 CSS Reset 组件之一，它基于 CSS 规范并修复了许多浏览器兼容性问题。以下是 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 */
-ms-text-size-adjust: 100%; /* 2 */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
font-family: sans-serif;
font-size: 16px;
}
/**
* 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;
}
/**
* Remove the padding on `section` elements in Firefox.
*/
section {
padding: 0;
}
/* Grouping content
========================================================================== */
/**
* Remove the padding on `main` in Firefox.
*/
main {
display: block;
padding: 0;
}
/**
* 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 `focus` outline in Chrome 57-, Safari, and Firefox.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 1 */
font-family: inherit; /* 2 */
font-size: 100%; /* 2 */
line-height: 1.15; /* 1 */
border: none;
}
/**
* 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;
}
/* Meter
========================================================================== */
/**
* Remove the default vertical scrollbar in IE.
*/
meter {
/* Reset `line-height` to avoid steps in Safari. */
/* See https://github.com/servo/servo/issues/4087 */
/* Crude approximation for the VMs earlier than 89. */
/* See https://bugs.webkit.org/show_bug.cgi?id=188347 */
/* Improve readability of the meter element in Safari. */
}
/* Progress
========================================================================== */
/**
* Remove the default vertical scrollbar in IE.
*/
progress {
/* Reset `line-height` to avoid steps in Safari. */
/* See https://github.com/servo/servo/issues/4087 */
/* Improve readability of the progress element in IE. */
}
/* Forms
========================================================================== */
/**
* Remove the margin in Firefox and Safari.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Remove the default vertical scrollbar in IE.
*/
legend {
border: none;
/* iOS Safari workaround for unreadable font-size in legend */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* Chrome and Firefox bug workaround for bottom margin. */
/* See https://bugs.chromium.org/p/chromium/issues/detail?id=712454 */
}
/**
* Remove the padding and border in IE 11.
*/
[type="checkbox"]:checked,
[type="radio"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:checked + *,
[type="radio"]:checked + * {
/* Remove the padding and border around the object in IE 10/11. */
font-size: inherit;
line-height: inherit;
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
[type="checkbox"] + *,
[type="radio"] + * {
font-size: inherit;
line-height: inherit;
}
/**
* 1. Correct the IE focus outline offset when the element is adjacent to a
* border.
* 2. Remove the inner padding in Chrome/Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; /* 1 */
}
/**
* Remove the outer padding in Chrome/Safari on macOS.
*/
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/**
* Prevent Safari resetting the default rectangle round the search input.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/**
* Remove the inner padding in Safari on macOS.
*/
::-webkit-file-upload-button {
-webkit-appearance: none; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Firefox.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/**
* Hide the button in IE.
*/
template {
display: none;
}Eric Meyer Resets
Eric Meyer Resets 是最早、也是最著名的 CSS Reset 组件之一，作者 Eric Meyer 通过覆盖 HTML 中的元素默认样式，实现了一个简洁而干净的 CSS Reset 方案。以下是 Eric Meyer Resets 的示例代码：
// 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;
}Yahoo! Reset CSS
Yahoo! Reset CSS 也是一种常用的 CSS Reset 方案，它比 Eric Meyer Resets 和 Normalize.css 更轻量，但也具有一定的实用价值。以下是 Yahoo! Reset CSS 的示例代码：
/*
YUI 3.18.1
build: daily.yui.yahooapis.com /projects/yui3/build/
*/
html{color:#000;background:#FFF}body{margin:0;padding:0}a{color:#00c}a:visited{color:#551a8b}a:focus{outline:thin dotted}a:hover,a:active{color:#f00;background:transparent}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted #000;text-decoration:none}b,strong{font-weight:bold}blockquote{margin:1.33em 1.33em 1.33em 0px}dfn{font-style:italic}hr{border:1px solid #ccc;margin:1em 0}img{border:0 none}pre,code,kbd,samp{font-family:monospace,serif;font-size:1em}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ol,ul{list-style:none}li{margin:.5em 0}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{-ms-interpolation-mode:bicubic}```指导意义
使用 CSS Reset 可以帮助我们在不同的浏览器和设备中，消除 HTML 元素默认样式之间的不一致性，使得页面风格统一，清晰易读。同时，在进行页面设计和排版工作时，CSS Reset 还可以提供便捷的基础样式，避免我们不必要的重复工作。因此，学习和理解 CSS Reset 的使用方法和技巧，对我们提高前端开发的效率和质量都非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfe5dbe46428fe9ec2a84a