1. 简介
在编写CSS样式时，我们通常需要先对不同浏览器之间CSS样式的差异性进行识别和重置，这就要用到normalize.css或者reset.css进行基础样式的重置，使得不同浏览器都可以显示出一致的样式。本文将分别介绍normalize.css和reset.css的定义、用途以及区别。
2. normalize.css
2.1 定义
normalize.css是由一位前GitHub工程师Nicolas Gallagher所编写的一个css样式表。主要目的是在保留有用的样式前提下，保证各个浏览器的默认样式表在尽可能相同的基础上（主要针对HTML5元素），提供更好的浏览器兼容性。它基于传统的CSS reset样式表，但更加灵活和强大，同时又不像CSS reset样式表那样删除了所有的默认样式信息。
2.2 用途
在实际开发中，normalize.css可以用来代替浏览器的默认样式表以避免由于不同浏览器的不同默认样式表而产生的样式差异，从而达到更为一致的效果。normalize.css是一个可以保护您免受常见的浏览器错误、残留问题和许多常见的错误的有效工具。
normalize.css文件包含许多共同的HTML元素样式的修复和增强，如h1-h6、ul、ol、p标签等。对于这些元素的属性，normalize.css通常采用较小的修改和改进，使得它们的更多属性更具有可用性，不过，它并不会撤销更改元素的默认外观。因此，normalize.css同时具有效果优异和易用性极好的双重优点。
2.3 区别
normalize.css和css reset的最大不同就在于，其会利用传统的CSS reset样式表来消除浏览器之间的默认样式差异，同时又避免了重置过多的样式，如font-size，换行和元素的边距问题，避免了在重置的基础上后期重新添加一些属性。
normalize.css的另一个优势是，它使得某些HTML5元素在不同浏览器中表现更一致，并提供了常用的CSS选项的修复，以确保不管在哪个浏览器中，这些元素的外观都是相同的。
/* An example of normalize.css */
/* All margin and padding is given a value of 0 */
html {
margin: 0;
padding: 0;
}
/* The border formatting is removed */
body {
border: none;
}
/* Default text values are set for heading types */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
3. reset.css
3.1 定义
reset.css是所有样式表中最常见的一种，它定义一个集合所有标记的标准属性集，然后将所有标记恢复到那个标准状态，这意味着它会为每个元素设置所有CSS属性的值。
对于reset.css，它所做的修改一般是对HTML元素的默认样式进行重置。例如，对于链接，reset.css一般会取消链接的下划线，还会重置列表元素的外观，去掉表格的边框等。可见，reset.css比normalize.css更加彻底，可以充分地将主要浏览器的默认样式表都消除掉。
3.2 用途
相比于normalize.css而言，reset.css的可读性不如normalize.css好，但是，reset.css仍然是在对浏览器差异进行控制以获得一致性的过程中一个相当有效的工具。简而言之，reset.css之所以被广泛使用，是因为消除默认样式的默认生效范围非常广泛。
3.3 区别
与normalize.css不同，reset.css是在默认情况下将CSS到一个规范的状态，而不是授予基本样式。reset.css会删除所有HTML元素的自带度样式，但是保留它们更有意义或无害的那部分。例如，form元素的默认样式是不被reset.css修改的，因为这会实质上破坏某些常见的布局并伤害arsr。需要注意的是，reset.css虽然在一定程度上保证了浏览器之间样式的一致性，但是也是对于原生样式的一个直接篡改，可能会引发更多的问题。
/* An example of reset.css */
/* All margin and padding values are removed */
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-family: inherit;
vertical-align: baseline;
}
/* The text is set to black */
body {
color: #000;
}
4. 综述
从以上两种样式表的作用和区别可以看出，normalize.css主要是避免了重置过多的样式，而在保持和优化默认样式的基础上进行调整和修改，可以减少样式错误，增加稳定性。而reset.css则在一定程度上保证了最后呈现的样子是所有浏览器的公共样式，且不会引入过多的错误和问题。在日常开发中，我们可以根据实际情况选择使用其中一个。