前言
在前端开发中，CSS 样式的重置或者初始化是必不可少的一环。CSS Reset 和 normalize.css 是两种常见的样式重置方案，本文将详细介绍它们的区别和使用场景。
CSS Reset
CSS Reset 是一种通过将所有元素的默认样式都设置为相同的值来重置样式的方法。其主要思想是将所有元素的样式都重置为一致的状态，然后再按照需要重新定义样式。这种方法可以避免出现浏览器之间的样式差异，保证网站在不同浏览器中呈现一致的效果。
以下是一个基本的 CSS Reset 样式：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}这个样式将所有元素的 margin、padding、border、font-size、font-weight 和 vertical-align 都设置为了默认值。
CSS Reset 的优点是可以完全自定义样式，不会受到浏览器默认样式的影响。但是，由于它将所有元素的样式都重置为一致的状态，可能会导致一些细节方面的问题，需要开发者手动去调整。
normalize.css
normalize.css 也是一种样式重置方案，但与 CSS Reset 不同的是，normalize.css 的重点在于保持浏览器样式的一致性，而不是完全重置所有元素的样式。
normalize.css 主要解决了以下问题：
- 保持跨浏览器的一致性。normalize.css 对于不同浏览器的默认样式做了统一处理，使得网站在不同浏览器中呈现一致的效果。
- 修复常见的浏览器样式 bug。normalize.css 修复了一些常见的浏览器样式 bug，例如 IE6 中的 inline-block 和 table-cell，FireFox 中的 overflow 和 vertical-align 等等。
- 保持有用的默认样式。normalize.css 保留了一些有用的默认样式，例如 h1~h6 的字体大小和行高，input 和 button 的默认样式等等。
以下是一个基本的 normalize.css 样式：
// www.javascriptcn.com code example
/* normalize.css v8.0.1 */
/* https://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;
}
/* Grouping content
========================================================================== */
/**
* Remove the margin in all browsers.
*/
hr {
margin: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Add the correct text decoration in Edge, IE, and Safari.
* 2. Add the correct font weight in Chrome, Edge, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font size in all browsers.
*/
code,
kbd,
samp {
font-size: 1em;
}
/**
* 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.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the text wrapping in Edge and IE.
*/
::-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
::-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
/**
* Remove the padding in IE 10.
*/
:-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
/**
* Remove the margin in IE 10.
*/
::-webkit-file-upload-button {
margin: 0;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10 onwards, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
## 使用场景
CSS Reset 和 normalize.css 都有自己的适用场景。CSS Reset 适用于需要完全自定义样式的项目，例如一些自定义的 UI 组件库或者需要定制化的网站。normalize.css 适用于需要保持浏览器样式的一致性的项目，例如一些需要兼容多个浏览器的网站。
在实际项目中，我们可以根据具体需求来选择使用哪种样式重置方案，也可以根据实际情况来综合使用它们。
## 结语
本文介绍了 CSS Reset 和 normalize.css 的区别和使用场景，希望能对前端开发者有所帮助。在实际开发中，我们需要根据实际情况来选择适合自己的样式重置方案，以便更好地提高开发效率和代码质量。
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/67d3fed8a941bf7134792bf9) ，转载请注明来源
[https://www.javascriptcn.com/post/67d3fed8a941bf7134792bf9](https://www.javascriptcn.com/post/67d3fed8a941bf7134792bf9)