介绍
Normalize.css 是一个很小的CSS文件（V5.0.0版本大小8KB），但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的
CSS reset，
Normalize.css是一种现代的、为HTML5准备的优质替代方案。
作用&优点
-
保留有用的浏览器默认样式
而不是像一些初始化代码一样删除它们 -
规范化
大部分HTML元素 -
更正
浏览器自身的
bug
并保证各
浏览器的一致性
-
用一些小技巧
优化CSS可用性
-
用注释和详细的文档来
解释代码
Normalize.css VS 传统初始化代码（Reset）
1. Normalize.css 保留了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，
Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，
Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了
Reset所能做到的范畴。关于这一点，
Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的
font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
可以看以下这个例子，看看对于HTML5中新出现的
input类型
search，
Normalize.css是如何保证跨浏览器的一致性的。
/**
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在
Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在
Github Wiki
中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
支持的浏览器
- Chrome (last two)
- Edge (last two)
- Firefox (last two)
- Firefox ESR
- Internet Explorer 8
- Opera (last two)
- Safari 6
Normalize.css v1 提供一些旧版浏览器支持
(IE 6 , Safari 4 ), 但是已经不再积极开发了。
用法
从
下载Normalize.css
，或者
使用CDN
，直接link到html文档中 或者 import到html文档/css文档中，
1.将
normalize.css作为自己项目的基础CSS，自定义样式值以满足设计师的需求。
2.引入
normalize.css源码并在此基础上构建，在必要的时候将Normalize.css引入的位置放在自己写的css文件前面覆盖默认值。
总结
引用知乎
gNahZ tuNlAw
的一个回答就是：
CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。
作者：gNahZ tuNlAw
链接：https://www.zhihu.com/question/20094066/answer/25004727
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
v5.0.0 源码解读
见Nirvana-zsy的
另一篇博客