大家好，我是IT修真院北京分院第22期的學員楊綱，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
默認樣式重置出現的原因：
目前為止，市面上的五大主流瀏覽器為IE、Chrome、Firefox、Safari和Opera。 當我們沒有給html元素設置樣式時，這5個瀏覽器會根據自己的默認樣式對html元素進行布局，但是由于每個瀏覽器的默認布局樣式不同， 會導致元素的展示方式出現差異，從而使同一頁面在不同瀏覽器中的展示出現差異。使用CSS樣式重置這一方式，就可以使網頁展示效果保持 一致。
最早的一份CSS reset來自Tantek 的undohtml.css， 很簡單的代碼，Tantek 根據自己的需要，對瀏覽器的默認樣式進行了一些重置。 其余一些有名的CSS reset如業(yè)界領袖Eric Meyer的reset; 或是Tripoli Reset。
2.知識剖析
什么是CSS RESET？
我們可以把它叫做CSS重設，也有人叫做CSS復位、默認CSS、CSS重置等。 CSS重設就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導致設計師 在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認值來為沒有定 義的樣式賦值，所以我們要先定義好一些CSS樣式，去“覆蓋”瀏覽器的CSS默認屬性， 來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問題。
CSS Reset的作用：
CSS Reset讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準，而實現這一基準最主要的方式就是“清零”
舉例：
* { outline: 0; padding: 0; margin: 0; border: 0; }其中 * 就是常說的通配符，意思是“所有的”。使用 * 代表所有的標簽或元素，就叫做通配符選擇器。
由于 * 會匹配所有的元素，所以當瀏覽器解析到 * 時，會將頁面內的所有標簽都進行如上的樣式重置， 這樣會影響網頁渲染的時間，所以使用 * 時一定要慎重，盡量不要在樣式重置時應用 * 。
CSS Reset的一些方法（推薦第2、4、5篇）
什么是NORMALIZE？
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上 提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css 是一種現代的、為HTML5準備的優(yōu)質替代方案。Normalize.css現在已經被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。
normalize創(chuàng)造的目的：
保護有用的瀏覽器默認樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細的文檔來
RESET和NORMALIZE的區(qū)別
1. Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。 相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再 為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時， Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。
2. Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。 這往往超出了Reset所能做到的范疇。關于這一點， Normalize.css修復的問題包含了HTML5元素的顯示設置、 預格式化文字的font-size問題、在IE9中SVG的溢出、許多 出現在各瀏覽器和操作系統(tǒng)中的與表單相關的bug。
3. Normalize.css 不會讓你的調試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈， 如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準則中 對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。
4. Normalize.css 是模塊化的
這個項目已經被拆分為多個相關卻又獨立的部分， 這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。 因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。
5. Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。 這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。 這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、 瀏覽器之間的差異，并且你可以更容易地進行自己的測試。
總得來說，CSS Reset 是革命黨，CSS Reset 里最激進那一派提倡不管你有用沒用， 通通給我脫了衣服，于是 *{margin:0;} 等等運動，把人家全拍了?？此剖潜娚降攘耍?實則是浪費了資源又占不到便宜，有求于人家的時候還得給加回去，實在需要人家的默認 樣式了怎么辦？自己看著辦吧。
Normalize.css 是改良派。他們提倡，各個元素都有其存在的道理， 簡單粗暴地一視同仁是不好的。誰都有誰的作用，給他們制定個規(guī)范，確保他們 在任何瀏覽器里都干好自己的活兒就好了。
3.常見問題
Question：
reset和normalize如何選用？還是直接不用？
4.解決方案
這需要以自身的需求為基點出發(fā)去選擇，是個公說公有理婆說婆有理的事， 故而在此只給出一些建議：
1.如果要使用reset。則盡量不要去直接拷貝CSS reset的代碼， 自己網站上沒用到的不用重置，且無意義的重置不要 （比如div本不需要{margin：0；padding：0}）， 盡量保證用到的重置是高效簡潔的；
2.如果要使用normalize，可以將normalize.css作為自己項目的基礎CSS， 自定義樣式值來滿足自己的需求。(例如去掉a標簽自帶的下劃線和p標簽的自帶的margin）
3.如果選擇不用，可以根據自己需要的再去設置改變，或者寫一段適合自己的修改默認樣式的代碼。
5.編碼實戰(zhàn)
6.擴展思考
到底該不該用 CSS reset？
7.參考文獻
參考一：張鑫旭-《CSS reset的重新審視 – 避免樣式重置》
參考三：Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別？
8.更多討論
討論:應該如何做到最優(yōu)的樣式重置呢?
鳴謝
感謝大家觀看
BY : 彭勇、胡嘉杰、萬維娜、吳昊 楊夢桐|楊剛\
課后問答：
1.蘋果系統(tǒng)用rest還是normalize好？
答：因為蘋果的safri瀏覽器比較特殊，即使用了normalize，他跟其他瀏覽器的樣式差別也會很大，所以建議清空。
2.那么我們平常開發(fā)建議用哪種？
答： 一般情況下，少即是好，代碼量大的話，標準化〉普通〉清空，
3.標準化和清空有什么區(qū)別
答：其實兩者的出發(fā)點都是一樣，只不過清空更像是一個打包的通配符，他幾乎清除了所有瀏覽器默認樣式，而標準化卻是改良派，只對他覺得應該改變的進行更改，
ppt鏈接：https://ptteng.github.io/PPT/PPT/css-71-CSS_Reset&Normalizeyg.html
視頻鏈接：視頻
密碼:?y6ku
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節(jié)奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導?？靵砼c我一起學習吧?！
