CSS Reset 是前端开发中常用的技术手段之一，它可以快速重置浏览器默认的 CSS 样式，方便开发者在不同浏览器中实现相同的样式效果。然而，这种技术并非一蹴而就，经历了多年的演进和发展，我们今天要来了解一下 CSS Reset 的历史演变以及发展现状。
初期的浏览器默认样式
早期的浏览器并没有严格规范的 CSS 样式，因此不同浏览器之间的样式差异较大，导致前端开发非常困难。此时，一些开发者提出了在网页中加入 Reset CSS 的想法，以清除浏览器默认样式并统一各浏览器之间的差异。早期比较流行的 CSS Reset 实现方式是简单的将所有 HTML 元素的 margin 和 padding 设为 0，然后再在各个元素上添加所需样式。
* {
margin: 0;
padding: 0;
}这种简单的 Reset CSS 可以起到很好的 reset 效果，但是它过于暴力，并不能完全清除浏览器默认样式，同时也不能确保样式在所有浏览器和设备上都表现一致。
Eric Meyer 的 Reset CSS
2000 年代初期，CSS Reset 技术逐渐流行起来，开发者们开始相互交流自己的 Reset CSS 方案。其中，Eric Meyer 的 Reset CSS 方案备受关注。这个方案针对所有 HTML 元素的默认样式逐一进行重置，使得各种 HTML 元素的样式在不同浏览器的表现高度一致。这套 Reset CSS 方案成为了后来 Reset CSS 的默认标准，直到今天被广泛应用。
// 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, 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;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}当然，这套 Reset CSS 方案并不是完美的。它清除了浏览器的默认样式，但是也清除了一些元素的默认表现，导致开发者需要自己重新设计这些元素的样式。此外，这套方案只针对一些基础元素进行了重置，对于部分自定义标签或者浏览器不支持的标签还需要开发者手动调整。
Normalize.css
随着 web 应用的复杂化，CSS Reset 技术也出现了新的变革。这个时候，Normalize.css 应运而生。Normalize.css 是一个相对于 Reset CSS 更为高级的解决方案，它能够按需重置浏览器默认样式，同时保留一些有用的默认样式，尤其是针对 HTML5 元素的样式。
Normalize.css 不直接修改元素的默认样式，而是针对浏览器的 bug 和一些不合理的默认表现进行重置，同时添加合理的样式来弥合不同浏览器之间的差异。
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ... 更为详细的代码请参考 https://github.com/necolas/normalize.css/blob/master/normalize.css
Normalize.css 非常适合用于大型 web 应用，能够使得开发者更加高效地编写代码，并且不会打破本来的样式。同时，它也在方便地调整 web 页面样式上提供了很好的指导和思路。
个性化 CSS Reset
除了上述常用的 Reset CSS 方案外，还有一种比较流行的方案是个性化 CSS Reset，它更加注重不同网站的样式特点以及开发者的创意发挥，使得不同 Reset CSS 方案的适用范围更加广泛。尤其是在近年来响应式布局的兴起，需要设计出与传统网站不同的 UI 样式时，个性化 CSS Reset 能够使得开发更加深入思考页面结构和样式特点，对开发者能力的提升也有很大帮助。
个性化的 Reset CSS 不限于特定的代码模板，这里给出的一个示例个性化 Reset CSS，仅供参考。
// javascriptcn.com 代码示例
/* Reset basic style related html tags */
html, body, header, nav, main, article, aside, footer, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, a, img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: center;
letter-spacing: normal;
}
/* Reset box model */
blockquote, figure, h1, h2, h3, h4, h5, h6, p, pre {
margin: auto auto;
clear:both;
}
body, html {
background-color: #fafafa;
font-size: 18px;
}
/* Reset link */
a {
color: inherit;
text-decoration: none;
outline: none;
cursor: pointer;
&:hover{
text-decoration:underline;
}
}
/* Reset list */
ul, ol {
list-style: none;
}
/* Reset horizontal line */
hr {
display: inline-block;
overflow: hidden;
margin: 0 ;
padding: 0;
border-width: 0;
border-bottom: 1px solid #d9d9d9;
}
/* Reset input, textarea */
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
outline: none;
padding: 0;
margin: 0;
font-size: 100%;
vertical-align: baseline;
border: none;
}总结
CSS Reset 技术由最初的暴力清除到规范化，再到个性化，反映了 web 应用的发展和前端技术的不断更新。随着不断的演变，Reset CSS 技术已经成为前端开发中的常用技术之一，能够大幅度提高开发效率和网站的跨浏览器和跨设备的稳定性。希望通过本文，读者能够更好地理解 CSS Reset 技术的演化历程和现状，同时也能够在以后的开发中更好地应用并深入研究。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654d28fe7d4982a6eb68abf4