轉(zhuǎn)載自簡書：https://www.jianshu.com/p/3d21d1932aa0

Normalize.css只是一個很小的css文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的css reset，Normalize.css是一種現(xiàn)代的，為HTML5準備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及許許多多其他的框架，工具和網(wǎng)站上。

?

通俗理解：不同的瀏覽器在對于CSS沒有定義的一些樣式屬性是不一樣的，比如沒有在自己的CSS里面規(guī)定超鏈接有沒有下劃線的時候，有些瀏覽器有，有些瀏覽器沒有;再比如有一些瀏覽器規(guī)定的超鏈接默認顏色是藍色，有一些又是黑色。而這個CSS的功能就是對幾乎所有的默認樣式進行重置，讓所有的瀏覽器上對于未定義的樣式瀏覽效果達到一致(雖然說無法完全一致，但至少可以消除掉大部分差距)。

?

?

綜述

Normalize.css是一種CSS reset的替代方案。經(jīng)過@necolas和@jon neal花了幾百個小時來努力研究不同瀏覽器的默認樣式的差異，這個項目終于變成了現(xiàn)在這樣。

我們創(chuàng)造normalize.css有下幾個目的：

• 保護有用的瀏覽器默認樣式而不是完全去掉它們
• 一般化的樣式：為大部分HTML元素提供
• 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
• 優(yōu)化CSS可用性：用一些小技巧
• 解釋代碼：用注釋和詳細的文檔來

Normalize.css支持包括手機瀏覽器在內(nèi)的超多瀏覽器，同時對HTML元素，排版，列表，嵌入的內(nèi)容，表單和表格都進行了一般化。盡管這個項目進行了一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

Normalize vs Reset

知道Normalize.css和傳統(tǒng)的區(qū)別是非常有價值的。

1.Normalize.css保護了有價值的默認值

Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有的公共排版元素重新設(shè)置樣式。當(dāng)一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并可能與現(xiàn)代標準相符合。

2.Normalize.css修復(fù)了瀏覽器的bug

它修復(fù)了常見的桌面段和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關(guān)于這一點，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置，與格式化文字的font-size問題，在IE９中SVG的溢出，許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。

可以看看以下的這個例子，看看對于HTML5中新出現(xiàn)的input類型search,Normalize.css是如何保證跨瀏覽器的一致性的。
/** *1.Addresses appearance set to searchfield in ss,Chrome *2Addresses box-size set to border-box in ss,Chrome(include -moz to future-proof) */ input[type="search"]{ -weblit-appearance:textfield;/* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box;/* 2 */ box-sizing:content-box; } /** *Removes inner padding and search candle button in ss,Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-candle-button{ -webkit-apprance:none; }

3.Normalize.css不會讓你的調(diào)試工具變得雜亂

使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中使用大段的繼承鏈。在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用是非常謹慎的，我們僅會有目的地對元素設(shè)置樣式。

4.Normalize.css是模塊化的

這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。

5.Normalize.css擁有詳細的文檔

Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以知道到每一行代碼具體實現(xiàn)了什么工作，為什么要寫這句代碼，瀏覽器之間的差異，并且你可以更容易地實現(xiàn)地進行自己的測試。

這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。

如何使用Normalize.css

首先，安裝或從Github下載Normalize.css，接下來有兩種主要途徑去使用它。

-策略一：將Normalize.css作為你自己項目的基礎(chǔ)CSS，自定義樣式值以滿足設(shè)計師的需求。
-策略二：引入Normalize.css源碼并在從基礎(chǔ)上構(gòu)建，在必要的時候用到你自己寫的CSS覆蓋默認值。

結(jié)語

無論是從適用范疇還是實施上，Normalize.css與Reset都有著極大的不同。嘗試一下這兩種方法并看看到底哪一種更適合你的開發(fā)偏好是非常值得的。這個項目在Github上以開源的形式開發(fā)。任何人都能夠提交問題報告或者是提交補丁。整個項目發(fā)展的過程對所有人都是可見的，而每一次改動的原因也都卸載commit信息中，這些都是有跡可循的。

?

總結(jié)

以上是生活随笔為你收集整理的浅谈Normalize.css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。