在前端开发过程中，我们常常需要处理浏览器的默认样式。CSS Reset 和 Normalize.css 是两种常见的方法，用于清除浏览器默认样式，从而实现更一致的跨浏览器样式表。本文将会介绍 CSS Reset 和 Normalize.css 的不同之处，并提供如何选择的指导意义。
CSS Reset
CSS Reset 的思想是将所有浏览器的默认样式都清除掉，以达到最大程度的一致性。在 CSS Reset 中，我们会对所有 HTML 元素的样式进行重置，包括边距、内边距、字体大小等等。这样做的好处是可以确保我们的样式表不会受到浏览器默认样式的影响，从而实现更加精细的样式设计。
下面是一个简单的 CSS Reset 样式表：
// www.javascriptcn.com code example
/* Reset all elements */
* {
margin: 0;
padding: 0;
border: 0;
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;
}
/* Remove list styles (bullets/numbers) */
ul,
ol {
list-style: none;
}
/* Remove hyperlink underline */
a {
text-decoration: none;
}需要注意的是，CSS Reset 可能会对我们的页面样式造成较大的影响，因为它会完全清除掉浏览器的默认样式。因此，在使用 CSS Reset 时，我们需要重新定义所有的 HTML 元素的样式，以确保页面的一致性。
Normalize.css
相比于 CSS Reset，Normalize.css 更加注重对浏览器默认样式进行规范化，保留了一些有用的默认值，并修复了一些浏览器的 bug。Normalize.css 的目标是提供一致性的跨浏览器样式，而不是完全清除浏览器默认样式。
下面是一个简单的 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 */
-ms-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
========================================================================== */
/**
* Remove the margin on nested lists in Chrome, Firefox, and Safari.
*/
dl dl,
dl ol,
ol dl,
ul dl {
margin: 0;
}
/**
* Remove the margin on paragraphs in Chrome, Firefox, and Safari.
*/
p {
margin: 0;
}需要注意的是，Normalize.css 并不会完全清除浏览器的默认样式，因此在使用时，我们仍然需要对某些 HTML 元素进行重置。
如何选择
在选择 CSS Reset 和 Normalize.css 时，我们需要考虑自己的项目需求。如果我们需要实现完全一致的样式，可以选择 CSS Reset；如果我们只需要规范化浏览器默认样式，可以选择 Normalize.css。
另外，我们也可以考虑使用其他的工具库，如 Bootstrap 和 Foundation。这些库已经内置了样式重置和规范化的功能，同时还提供了一些常用的 UI 组件和布局方式。
结语
CSS Reset 和 Normalize.css 都是常见的清除浏览器默认样式的方法。选择哪种方法取决于我们的项目需求。在使用时，我们需要仔细考虑，以确保项目的一致性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d92a2ca941bf71340ae783