公共的样式，兼容各种浏览器

清谈Normalize.css

Normalize.css只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset , Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、CSS Tricks 以及许许多多其他框架、工具和网站上。

如何使用 normalize.css

首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。

• 策略一：将normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。

• 策略二：引入normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。

#### 问题： 那我同时link两个css的话，会不会有冲突？

详细说：我使用Normalize.css是为了像你所说的对几乎所有的默认样式进行重置，让所有的浏览器上对于未定义的样式浏览效果达到一致，那我再link我自己的style.css是不是也可以在他的基础上达到我的效果？

答：把Normalize.css里面的所有内容放在自己的style.css的最上面，那样如果有冲突的话，写在后面的CSS设置默认是会覆盖掉写在前面的

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 不会让你的调试工具变的杂乱

## 结语
无论从适用范畴还是实施上，Normalize.css与Reset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的，而每一次改动的原因也都写在commit信息中，这些都是有迹可循的。