大家好，我是IT修真院深圳分院第02期學(xué)員孫劍立，一枚正直善良的web程序員急膀。
今天給大家分享一下沮协，修真院官網(wǎng)CSS任務(wù)13中有關(guān)如何做默認(rèn)樣式的重置？
1.背景介紹
默認(rèn)樣式重置出現(xiàn)的原因：
在日常生活中常用的幾個主流瀏覽器中卓嫂， 當(dāng)我們沒有給html元素設(shè)置樣式時慷暂，這些瀏覽器會根據(jù)自己的默認(rèn)樣式對html元素進(jìn)行布局，但是由于每個瀏覽器的默認(rèn)布局樣式不同晨雳， 會導(dǎo)致元素的展示方式出現(xiàn)差異行瑞，從而使同一頁面在不同瀏覽器中的展示出現(xiàn)差異。使用CSS樣式重置這一方式餐禁，就可以使網(wǎng)頁展示效果保持 一致血久。
2.知識剖析
什么是CSS RESET？
在HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式帮非，例如 p 標(biāo)簽有上下邊距氧吐，strong標(biāo)簽有字體加粗樣式，em標(biāo)簽有字體傾斜樣式末盔。不同瀏覽器的默認(rèn)樣式之間也會有差別筑舅，例如ul默認(rèn)帶有縮進(jìn)的樣式，在IE下陨舱，它的縮進(jìn)是通過margin實現(xiàn)的翠拣，而Firefox下，它的縮進(jìn)是由padding實現(xiàn)的隅忿。在切換頁面的時候心剥，瀏覽器的默認(rèn)樣式往往會給我們帶來麻煩邦尊，影響開發(fā)效率背桐。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式蝉揍×辞停“覆蓋”瀏覽器的CSS默認(rèn)屬性。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉又沾！這就是CSS reset弊仪。
CSS Reset的作用：
CSS Reset讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準(zhǔn)，而實現(xiàn)這一基準(zhǔn)最主要的方式就是“清零”
舉例：
* { outline: 0; padding: 0; margin: 0; border: 0; } 其中 * 就是常說的通配符杖刷，意思是“所有的”励饵。使用 * 代表所有的標(biāo)簽或元素，就叫做通配符選擇器滑燃。
由于 * 會匹配所有的元素役听，所以當(dāng)瀏覽器解析到 * 時，會將頁面內(nèi)的所有標(biāo)簽都進(jìn)行如上的樣式重置， 這樣會影響網(wǎng)頁渲染的時間典予，所以使用 * 時一定要慎重甜滨，盡量不要在樣式重置時應(yīng)用 * 。
CSS Reset的一些方法瘤袖，可以參考我下面貼出的幾個鏈接地址：
什么是NORMALIZE衣摩？
Normalize.css 只是一個很小的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)站上纹腌。
normalize創(chuàng)造的目的：
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細(xì)的文檔來
RESET和NORMALIZE的區(qū)別：
1. Normalize.css 保護(hù)了有價值的默認(rèn)值
Reset通過為幾乎所有的元素施加默認(rèn)樣式霎终，強(qiáng)行使得元素有相同的視覺效果。 相比之下升薯，Normalize.css保持了許多默認(rèn)的瀏覽器樣式莱褒。這就意味著你不用再 為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個元素在不同的瀏覽器中有不同的默認(rèn)值時涎劈， Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合广凸。
2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動端瀏覽器的bug。 這往往超出了Reset所能做到的范疇蛛枚。關(guān)于這一點谅海， Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、 預(yù)格式化文字的font-size問題蹦浦、在IE9中SVG的溢出扭吁、許多 出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。
3. Normalize.css 不會讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈盲镶， 如下圖所示侥袜。在Normalize.css中就不會有這樣的問題，因為在我們的準(zhǔn)則中 對多選擇器的使用時非常謹(jǐn)慎的溉贿，我們僅會有目的地對目標(biāo)元素設(shè)置樣式枫吧。
4. Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分， 這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值宇色。 因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）九杂。
5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試闽寡。 這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。 這意味著你可以找到每一行代碼具體完成了什么工作尼酿、為什么要寫這句代碼爷狈、 瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試裳擎。
總得來說涎永，CSS Reset 是革命黨 ，CSS Reset 里最激進(jìn)那一派提倡不管你有用沒用鹿响， 通通給我脫了衣服羡微，于是 *{margin:0;} 等等運(yùn)動，把人家全拍了惶我÷杈螅看似是眾生平等了， 實則是浪費了資源又占不到便宜绸贡，有求于人家的時候還得給加回去盯蝴，實在需要人家的默認(rèn) 樣式了怎么辦？自己看著辦吧听怕。
Normalize.css 是改良派捧挺。他們提倡，各個元素都有其存在的道理尿瞭， 簡單粗暴地一視同仁是不好的闽烙。誰都有誰的作用，給他們制定個規(guī)范声搁，確保他們 在任何瀏覽器里都干好自己的活兒就好了黑竞。
3.常見問題
Question：reset和normalize如何選用？還是直接不用疏旨？
4.解決方案
按需求出發(fā)
1.如果要使用reset很魂。則盡量不要去直接拷貝CSS reset的代碼， 自己網(wǎng)站上沒用到的不用重置充石，且無意義的重置不要 （比如div本不需要{margin：0莫换；padding：0}）霞玄， 盡量保證用到的重置是高效簡潔的骤铃；
2.如果要使用normalize，可以將normalize.css作為自己項目的基礎(chǔ)CSS坷剧， 自定義樣式值來滿足自己的需求惰爬。(例如去掉a標(biāo)簽自帶的下劃線和p標(biāo)簽的自帶的margin）
3.如果選擇不用，可以根據(jù)自己需要的再去設(shè)置改變惫企，或者寫一段適合自己的修改默認(rèn)樣式的代碼撕瞧。
5.編碼實戰(zhàn)
6.擴(kuò)展思考
到底該不該用 CSS reset陵叽？
7.參考文獻(xiàn)
參考一： 張鑫旭-《CSS reset的重新審視 – 避免樣式重置》
參考二：來，讓我們談一談 Normalize.css
參考三：Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別丛版？
8.更多討論
討論【①】:應(yīng)該如何做到最優(yōu)的樣式重置呢?
討論【②】:關(guān)于張鑫旭提到的“少即是多”巩掺，你怎么看?
討論【③】:移動端的頁面樣式重置和PC端的一樣嗎？
ppt鏈接：PPT
視頻鏈接：視頻
鳴謝
感謝大家觀看
BY : 楊夢桐＆孫劍立
今天的分享就到這里啦胖替，歡迎大家點贊、轉(zhuǎn)發(fā)豫缨、留言独令、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始好芭，找個師兄燃箭，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏舍败，學(xué)習(xí)的路上不再迷谜欣辏”。
這里是技能樹.IT修真院邻薯，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線瓢颅，學(xué)習(xí)透明化，成長可見化弛说，師兄1對1免費指導(dǎo)挽懦。快來與我一起學(xué)習(xí)吧?木人！
請點擊鏈接【修真院】
