在前端开发中，我们经常需要对网页的样式进行控制。但是每个浏览器对于标签的默认样式都有一个独特的实现方式，这导致在不同的浏览器下，网页元素之间的样式差异会非常大。为了解决这个问题，开发者们创造了 CSS Reset 和 normalize.css 两个工具。
CSS Reset
CSS Reset 是指通过一系列的样式重置，将所有的网页元素的样式都统一为同样的表现。目的是为了消除浏览器间的差异，使得网页在任何浏览器下都以同一种方式呈现。
一个 CSS Reset 文件通常包含了许多类似下面这样的代码：
// javascriptcn.com 代码示例
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, font, 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;
}这段代码为页面中的所有元素设置了初始值，消除了大部分浏览器的差异。
使用 CSS Reset 简单粗暴，可以让网页元素样式相对统一。但是一些细节处的设计可能也被重置了，需要选择性的重新设置。
normalize.css
normalize.css 是一个可定制的样式库，它通过对不同浏览器样式的标准化，还原了浏览器的一些默认样式，并且修复了一些常见的 bug。
normalize.css 与传统的 CSS Reset 不同，它不是将浏览器的样式全部重置，而是对浏览器的默认样式进行覆盖和修复，尽量避免了重置后导致一些意外问题的出现。
normalize.css 提供了一些基本的全局样式设置，而且在一些标签的样式上作了很多优化，例如：
- 正确处理 font-weight 在某些浏览器下的差异
- 保证了 table 元素在各大浏览器下表现一致
- 正确设置了 form 元素在不同浏览器下的样式
示例代码如下：
// javascriptcn.com 代码示例
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
...
button, input, optgroup, select, textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
}normalize.css 中的代码比较简洁优雅，而且不会产生很多意外问题。
总结
CSS Reset 和 normalize.css 在网页样式统一化方面都起到了非常重要的作用。CSS Reset 更适用于项目较小，且不需要特别精细样式的页面；而 normalize.css 更适合于有明确设计要求的大型项目。
在使用任何一个库之前，要了解这个库的功能及适用范围，并使用工具根据不同项目的需要进行个性化自定义才是正确的方式。
以上，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b38c37d4982a6eb52519e