大家好，我是IT修真院北京分院第21期的學員楊夢桐，今天的這篇文章，主要關于瀏覽器樣式的重置。
到目前為止，市面上的五大主流瀏覽器為IE、Chrome、Firefox、Safari和Opera。當這些瀏覽器在載入html文件的時候，如果我們沒有給html元素設置樣式，瀏覽器會基于自己的默認樣式對其中的一些標簽進行頁面布局，但是由于瀏覽器的默認樣式不同，所以會導致實現頁面布局的方式不同。比如有一些瀏覽器通過margin實現內容的間距，而另一些瀏覽器通過padding實現。而且例如如滾動條，按鈕，選擇框等元素的默認CSS樣式，也不近相同。這樣就導致同一個頁面在不同瀏覽器載入后顯示的效果不同。為了盡可能避免這種情況，我們可以通過使用CSS樣式重置這一方式，使網頁展示效果保持一致。
以下是一些瀏覽器的默認樣式，從中甚至可以看出，同一瀏覽器的不同版本也會有一些樣式差異。
webkit瀏覽器默認樣式：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
火狐瀏覽器默認樣式：https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css
IE瀏覽器不同版本默認樣式對比表：http://developer.doyoe.com/default-style/
最早的一份CSS reset來自Tantek的undohtml.css，很簡單的代碼，Tantek 根據自己的需要，對瀏覽器的默認樣式進行了一些重置。其余一些有名的CSS reset有業界領袖Eric Meyer的reset或是Tripoli Reset。現在，基于完美的實現頁面在不同瀏覽器的顯示這一需求，CSS重置這一方式被普遍地運用在頁面布局中。
首先，我們來了解一下CSS reset。
1. 什么是CSS Reset？
我們可以把它叫做CSS重設，也有人叫做CSS復位、默認CSS、CSS重置等。CSS重設就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導致設計師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式，去“覆蓋”瀏覽器的CSS默認屬性，來讓所有瀏覽器都按照同樣的規則解釋CSS，這樣就能避免發生這種問題。
2.如何實現CSS Reset？
CSS Reset的目的是讓各個瀏覽器的CSS樣式有一個統一的基準，而實現這一基準最主要的方式就是“清零”，即將所有的默認樣式直接清除。最簡單的方法是直接使用
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
其中 * 就是常說的通配符，意思是“所有的”。使用 * 代表所有的標簽或元素，就叫做通配符選擇器。由于 * 會匹配所有的元素，所以當瀏覽器解析到 *時，會將頁面內的所有標簽都進行如上的樣式重置，這樣會影響網頁渲染的時間，所以使用 * 時一定要慎重，盡量不要在樣式重置時應用 * 。
除了CSS reset之外，還有一種樣式重置的方式就是使用Normalize.css。Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks以及許許多多其他框架、工具和網站上。我們可以在這里查看它的源碼：https://github.com/necolas/normalize.css，關于源碼的中文注釋，可以查看：http://www.cnblogs.com/shrekuu/archive/2013/06/06/normalize-cn.html
相較CSS reset，Normalize有一些自己的優勢。
1. Normalize.css沒有重置所有的屬性，所以一些默認公用的屬性無需自己再手動添加。
2. Normalize.css修復了瀏覽器的bug，修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。
3. Normalize.css避免了瀏覽器調試工具中的大段繼承鏈，
4. Normalize.css 是模塊化的并且擁有詳細的文檔，方便進行自己的測試。
如果需要進行瀏覽器的默認樣式重置，則可以根據自己的需要進行設置，或者寫一段適合自己的修改默認樣式的代碼。要避免無意義的重置，盡可能讓自己的代碼簡潔有效優化好。
參考文獻
張鑫旭-《CSS reset的重新審視 – 避免樣式重置》：http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/
來，讓我們談一談 Normalize.css：http://jerryzou.com/posts/aboutNormalizeCss/
Normalize.css 與傳統的 CSS Reset 有哪些區別？：https://www.zhihu.com/question/20094066/answer/25004727
PPT ：https://ptteng.github.io/PPT/PPT/css-71-CSS_Reset&Normalize.html#/
視頻鏈接：https://v.qq.com/x/page/d0518tdfd5t.html
