引言
在前端开发中，我们经常需要重置浏览器默认样式，使得我们的设计能够始终如一的呈现在不同的浏览器中。这个过程通常被称为“重置CSS”或“CSS Reset”。
CSS Reset 和 Normalize.css 是两个很受欢迎的重置CSS框架。这篇文章将深入探讨它们的区别和联系。
CSS Reset 是什么？
CSS Reset 是一种CSS样式表，旨在消除不同浏览器在不同元素上的默认样式差异，以便我们可以从一个更加一致的出发点开始实现我们的设计。由于不同浏览器有不同的默认样式，我们需要一个适用范围广，包容性高的重置CSS。最初的CSS Reset框架在2003-2004年左右出现，随着Web开发的进一步发展，它们也越来越被广泛接受。
以下是一个最简单的重置样式表：
// 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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: 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;
}这是一个非常彻底的重置CSS，它将大多数HTML标签的默认样式都设置为0，而HTML5具有的新元素（如article，section和nav等）则设置为显示为块级元素。这种方法将大幅减少跨浏览器样式的错误和平台特定的样式。
但是，这种方法也带来了一定的短板。我们在样式表中定义所有的样式，因此如果我们在重置样式中定义的某个元素或属性不受支持或者不工作，那么我们可能会遇到一些样式方面的问题。
Normalize.css 是什么？
Normalize.css 是一种CSS文件，旨在保留文档元素默认样式的规范化，同时尝试修复不同浏览器之间的一些常见的样式差异。它是由Nicholas Gallagher编写的，可以免费使用。
以下是示例Normalize.css样式表：
// www.javascriptcn.com code example
/* 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 */
}
如上所述，Normalize.css 相对于重置CSS，维护了默认样式，以保证各元素默认样式的一致性和正常的功能。它提供了一些常见的修复措施，使得不同浏览器之间的样式表现更一致。在使用Normalize.css时，通常我们只需要将它包含在我们的项目中，而不需要修改或覆盖任何默认样式。
不同之处
虽然 CSS Reset 和 Normalize.css 同为CSS样式表，但它们在大多数方面都有很大的差异：
- CSS Reset会去除所有默认样式，而Normalize.css会维护一部分的默认样式来确保文档的一致性和可用性。
- CSS Reset可以消除浏览器中如斜体等大段样式的差异化，而Normalize.css则尝试在这些情况下保持一致。
- 如果您使用Reset，您应该在您的公司组织的任何样式之前应用样式。如果您使用Normalize.css，则可能需要进一步的定制，以确保所有特定观众和平台的一致性和兼容性。
- 在Normalize.css中，很多元素的行高和字体大小被定义为在所有浏览器中保持一致。在Reset中，所有元素的大小都被重置为零。
总结
CSS Reset 和 Normalize.css可能是前端开发中最常用的CSS库。它们各自的优劣点可以根据项目的具体要求来进行选择。如果您希望自己完全定制样式，或者遇到了Normalize.css找不到的兼容性问题，那么选择CSS Reset将是最好的选择。而如果您需要始终保持一致的默认样式，并且需要比Reset更好的兼容性修复，那么Normalize.css则是您的首选。最后，在应用任何样式库时应该小心审查，并确保它们适用于您的要求。
示例代码
以下是一个简单的示例代码，演示如何使用Normalize.css。
// www.javascriptcn.com code example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Normalize.css Example</title>
<link rel="stylesheet" href="normalize.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>以上代码中，<link />标签引用了Normalize.css文件，并在<head>标签中添加自定义CSS样式定义。这是最基本的使用方法，您也可以根据需要进行更改、迭代。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6459ae4f968c7c53b0bc8f2c