大家好，我是IT修真院北京分院第21期的學(xué)員楊夢桐贝搁，今天的這篇文章刃宵，主要關(guān)于瀏覽器樣式的重置。
到目前為止徘公，市面上的五大主流瀏覽器為IE牲证、Chrome、Firefox关面、Safari和Opera坦袍。當(dāng)這些瀏覽器在載入html文件的時(shí)候，如果我們沒有給html元素設(shè)置樣式等太，瀏覽器會(huì)基于自己的默認(rèn)樣式對其中的一些標(biāo)簽進(jìn)行頁面布局捂齐，但是由于瀏覽器的默認(rèn)樣式不同，所以會(huì)導(dǎo)致實(shí)現(xiàn)頁面布局的方式不同缩抡。比如有一些瀏覽器通過margin實(shí)現(xiàn)內(nèi)容的間距奠宜，而另一些瀏覽器通過padding實(shí)現(xiàn)。而且例如如滾動(dòng)條瞻想，按鈕压真，選擇框等元素的默認(rèn)CSS樣式，也不近相同蘑险。這樣就導(dǎo)致同一個(gè)頁面在不同瀏覽器載入后顯示的效果不同滴肿。為了盡可能避免這種情況，我們可以通過使用CSS樣式重置這一方式佃迄，使網(wǎng)頁展示效果保持一致泼差。
以下是一些瀏覽器的默認(rèn)樣式，從中甚至可以看出呵俏，同一瀏覽器的不同版本也會(huì)有一些樣式差異堆缘。
webkit瀏覽器默認(rèn)樣式：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
火狐瀏覽器默認(rèn)樣式：https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css
IE瀏覽器不同版本默認(rèn)樣式對比表：http://developer.doyoe.com/default-style/
最早的一份CSS reset來自Tantek的undohtml.css，很簡單的代碼普碎，Tantek 根據(jù)自己的需要吼肥，對瀏覽器的默認(rèn)樣式進(jìn)行了一些重置。其余一些有名的CSS reset有業(yè)界領(lǐng)袖Eric Meyer的reset或是Tripoli Reset∷娉＃現(xiàn)在潜沦，基于完美的實(shí)現(xiàn)頁面在不同瀏覽器的顯示這一需求，CSS重置這一方式被普遍地運(yùn)用在頁面布局中绪氛。
首先唆鸡，我們來了解一下CSS reset。
1. 什么是CSS Reset枣察？
我們可以把它叫做CSS重設(shè)争占，也有人叫做CSS復(fù)位燃逻、默認(rèn)CSS、CSS重置等臂痕。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同伯襟，導(dǎo)致設(shè)計(jì)師在沒有定義某個(gè)CSS屬性時(shí)，不同的瀏覽器會(huì)按照自己的默認(rèn)值來為沒有定義的樣式賦值握童，所以我們要先定義好一些CSS樣式姆怪，去“覆蓋”瀏覽器的CSS默認(rèn)屬性，來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS澡绩，這樣就能避免發(fā)生這種問題稽揭。
2.如何實(shí)現(xiàn)CSS Reset？
CSS Reset的目的是讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)肥卡，而實(shí)現(xiàn)這一基準(zhǔn)最主要的方式就是“清零”溪掀，即將所有的默認(rèn)樣式直接清除。最簡單的方法是直接使用
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
其中 * 就是常說的通配符步鉴，意思是“所有的”揪胃。使用 * 代表所有的標(biāo)簽或元素，就叫做通配符選擇器氛琢。由于 * 會(huì)匹配所有的元素喊递，所以當(dāng)瀏覽器解析到 *時(shí)，會(huì)將頁面內(nèi)的所有標(biāo)簽都進(jìn)行如上的樣式重置艺沼，這樣會(huì)影響網(wǎng)頁渲染的時(shí)間册舞，所以使用 * 時(shí)一定要慎重，盡量不要在樣式重置時(shí)應(yīng)用 * 障般。
除了CSS reset之外，還有一種樣式重置的方式就是使用Normalize.css盛杰。Normalize.css 只是一個(gè)很小的CSS文件挽荡，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset即供，Normalize.css是一種現(xiàn)代的定拟、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap逗嫡、HTML5 Boilerplate青自、GOV.UK、Rdio驱证、CSS Tricks以及許許多多其他框架延窜、工具和網(wǎng)站上。我們可以在這里查看它的源碼：https://github.com/necolas/normalize.css抹锄，關(guān)于源碼的中文注釋逆瑞，可以查看：http://www.cnblogs.com/shrekuu/archive/2013/06/06/normalize-cn.html
相較CSS reset荠藤，Normalize有一些自己的優(yōu)勢。
1. Normalize.css沒有重置所有的屬性获高，所以一些默認(rèn)公用的屬性無需自己再手動(dòng)添加哈肖。
2. Normalize.css修復(fù)了瀏覽器的bug，修復(fù)的問題包含了HTML5元素的顯示設(shè)置念秧、預(yù)格式化文字的font-size問題淤井、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug摊趾。
3. Normalize.css避免了瀏覽器調(diào)試工具中的大段繼承鏈庄吼，
4. Normalize.css 是模塊化的并且擁有詳細(xì)的文檔，方便進(jìn)行自己的測試严就。
如果需要進(jìn)行瀏覽器的默認(rèn)樣式重置总寻，則可以根據(jù)自己的需要進(jìn)行設(shè)置，或者寫一段適合自己的修改默認(rèn)樣式的代碼梢为。要避免無意義的重置渐行，盡可能讓自己的代碼簡潔有效優(yōu)化好。
參考文獻(xiàn)
張鑫旭-《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 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別祟印？：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
