一、背景

　　它是css樣式初始化的外掛。

　　在實際開發中，我們經常會將瀏覽器預設的樣式重置，比如如下方法：

*{
    margin:0;
    padding:0,
    border:0;
}

　　通過上述方法可以重置樣式，但是過於簡單粗暴，*是萬用字元，需要把所有的標籤都遍歷一遍，當網站較大的時候，樣式比較多，這樣寫就大大的加強了網站執行的負載，會使網站載入的時候需要很長一段時間，因此不建議使用。與此同時，Normalize.css就誕生了，它與許多css重置不同，保留了有用的預設值，更正了常見瀏覽器不一致性等錯誤。

　　Normalize.css只是一個很小的css檔案，但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset,Normalize.css是一種現代的、為HTML5準備的優質替代方案。總之，Normalize.css是一種CSS reset的替代方案。

二、作用

• 保護有用的瀏覽器樣式而不是去掉他們。

• 為大部分HTML元素提供一般化的樣式

• 修復瀏覽器自身的bug並保證各瀏覽器的一致性。

• 優化css可用性

• 用註釋和詳細的文件來解釋程式碼

• Normalize支援包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表哥都進行了一般化。儘管這個專案基於一般化的原則，但我們還是在合適的地方使用了更實用的預設值。

1. Normalize.css 保護了有價值的預設值

　　Reset通過為幾乎所有的元素施加預設樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多磨人的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設定樣式。當一個元素在不同的瀏覽器中有不同的預設值時，Normalize.css會力求讓這些樣式保持一致並儘可能與現代標準符合。

2. Normalize.css 修復了瀏覽器的bug

　　它修復了常見的桌面端與移動端瀏覽器的bug。這往往超出了Reset所能做到的範圍。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設定、預格式化文字的font-size問題、在IE9中SVG的溢位、許多出現在各瀏覽器和作業系統中的與表單相關的bug。

3. Normalize.css 不會讓你的除錯工具變的雜亂

　　使用Reset最讓人困擾的地方莫過於在瀏覽器除錯工具中大段大段的繼承鏈，在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用是非常謹慎的，我們僅會有目的地對目標元素設定樣式。

4. Normalize.css 是模組化的

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

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

　　Normalize.css的程式碼基於詳細而全面的跨瀏覽器研究與測試。這個檔案中擁有詳細的程式碼說明並在Github Wiki中有進一步的說明。這意味著你可以找到每一行程式碼具體完成了什麼工作、為什麼要寫這句程式碼、瀏覽器之間的差異，並且你可以更容易的進行自己的測試。

三、使用方式

　　1、安裝

npm install --save normalize.css 

　　2、main.js引入

import 'normalize.css/normalize.css'

　　3、如果引入報錯，可能沒有安裝css-loader 和style-loader

npm install css-loader style-loader