1.背景介紹
默認樣式重置出現(xiàn)的原因：因為現(xiàn)在的瀏覽器很多讯壶，并且每個瀏覽器都有自己的默認樣式，這樣就會導(dǎo)致一個頁面在多個瀏覽器下展示產(chǎn)生差異湾盗，所以我們需要做一些處理使每個瀏覽器下展示一致伏蚊，于是就出現(xiàn)了默認樣式重置的說法，可以說格粪，兼容性是CSS reset誕生的的主要原因之一躏吊，還有一方面的原因是類似于“庫”的作用（.l{float:left}氛改、.r{float:right}為了方便使用）。
最早的一份CSS reset來自Tantek的undohtml.css比伏，很簡單的代碼胜卤，Tantek根據(jù)自己的需要，對瀏覽器的默認樣式進行了一些重置赁项。（http://tantek.com/log/2004/undohtml.css）葛躏。其余一些有名的CSS reset如業(yè)界領(lǐng)袖Eric Meyer的reset（http://meyerweb.com/eric/tools/css/reset/），或是Tripoli Reset（http://monc.se/kitchen/124/introducing-tripoli）悠菜。
2.知識剖析
reset是什么舰攒？
我們可以把它叫做CSS重設(shè)，也有人叫做CSS復(fù)位悔醋、默認CSS摩窃、CSS重置等。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同篙顺，導(dǎo)致設(shè)計師在沒有定義某個CSS屬性時偶芍，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式德玫，去“覆蓋”瀏覽器的CSS默認屬性，來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS椎麦，這樣就能避免發(fā)生這種問題宰僧。
CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準，而這個基準更多的就是“清零”观挎！如下面常見但事實上極不推薦的代碼：
*{ margin:0; padding:0; }
其中*就是常說的通配符琴儿，它代表了HTML里面任意一個標簽。 如上代碼所示嘁捷，很多人喜歡拿通配符做樣式重置造成，但是對于網(wǎng)站優(yōu)化而言，使用通配符的做法是非常不可取的雄嚣，因為這種做法相當消耗瀏覽器的性能晒屎。 原因在于星號代表任意一個標簽，當瀏覽器解析到星號時缓升， 就會將頁面中所有用到的標簽都進行一次樣式重置鼓鲁，不管這個標簽是否有這樣的默認樣式。雖然這種性能消耗可以被忽略不計港谊， 但是做為一個有責(zé)任心的web前端開發(fā)人員來說骇吭，如無必要，通配符還是盡量不要出現(xiàn)在樣式重置中歧寺。
以下是我找的幾個css reset的常用代碼燥狰，可以參考：
目前比較全的CSS重設(shè)(reset)方法總結(jié)----
http://blog.bingo929.com/css-reset-collection.html
HTML5 css reset------
http://www.zhangxinxu.com/wordpress/2010/08/html5-css-reset/
CSS工具：重置CSS-----
http://meyerweb.com/eric/tools/css/reset/
幾個CSS重置默認樣式reset.css代碼----
http://www.codefans.net/articles/756.shtml
css重置樣式表-----
http://blog.csdn.net/u014516981/article/details/52141451
normalize是什么棘脐？
Normalize.css只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性龙致。相比于傳統(tǒng)的CSS reset蛀缝，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質(zhì)替代方案净当。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap内斯、HTML5 Boilerplate、GOV.UK像啼、Rdio俘闯、CSS Tricks以及許許多多其他框架、工具和網(wǎng)站上忽冻。
github上的源碼：https://github.com/necolas/normalize.css
normalize創(chuàng)造的目的：
1.保護有用的瀏覽器默認樣式而不是完全去掉它們
2.一般化的樣式：為大部分HTML元素提供
3.修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
4.優(yōu)化CSS可用性
5.解釋代碼：擁有注釋和詳細的文檔
reset和normalize的區(qū)別：
1. Normalize.css保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式真朗，強行使得元素有相同的視覺效果。相比之下僧诚，Normalize.css保持了許多默認的瀏覽器樣式遮婶。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當一個元素在不同的瀏覽器中有不同的默認值時湖笨，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xià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中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用時非常謹慎的排截，我們僅會有目的地對目標元素設(shè)置樣式嫌蚤。
4. Normalize.css是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值匾寝。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）搬葬。
5. Normalize.css擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明艳悔。這意味著你可以找到每一行代碼具體完成了什么工作急凰、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試抡锈。
總得來說疾忍，CSS Reset是革命黨，CSS Reset里最激進那一派提倡不管你有用沒用床三，通通給我脫了衣服一罩，于是*{margin:0;}等等運動，把人家全拍了撇簿∧粼ǎ看似是眾生平等了，實則是浪費了資源又占不到便宜四瘫，有求于人家的時候還得給加回去汉嗽，實在需要人家的默認樣式了怎么辦？自己看著辦吧找蜜。
Normalize.css是改良派饼暑。他們提倡，各個元素都有其存在的道理洗做，簡單粗暴地一視同仁是不好的弓叛。誰都有誰的作用，給他們制定個規(guī)范诚纸，確保他們在任何瀏覽器里都干好自己的活兒就好了撰筷。
來源于‘知乎用戶‘（侵刪）：
https://www.zhihu.com/question/20094066/answer/25004727
3.常見問題
要如何選用reset和normalize？或者直接不用畦徘？
4.解決方案
這需要以自身的需求為基點出發(fā)去選擇闭专，是個公說公有理婆說婆有理的事，故而在此只給出一些建議：
1.如果要使用reset旧烧。盡量不要跟風(fēng)的去直接拷貝CSS reset的代碼，自己網(wǎng)站上沒用到的不用重置画髓，無意義的重置不要（比如div本不需要{margin：0掘剪；padding：0}），盡量使用到的重置是高效簡潔的奈虾；
2.如果要使用normalize夺谁，可以將normalize.css作為自己項目的基礎(chǔ)CSS，自定義樣式值來滿足自己的需求肉微。(例如去掉a標簽自帶的下劃線和p標簽的自帶的margin）
3.如果選擇不用匾鸥，可以按自己的需要去寫適合自身的樣式重設(shè)代碼。
5.編碼實戰(zhàn)
Demo1-常用標簽的默認樣式展示：http://119.10.57.69:880/ptt147/Lesson/css-12-ResetAndNormalize/demo1.html
Demo2-用reset代碼之后的樣式展示：http://119.10.57.69:880/ptt147/Lesson/css-12-ResetAndNormalize/demo2.html
Demo3-用normalize.css之后的樣式展示：http://119.10.57.69:880/ptt147/Lesson/css-12-ResetAndNormalize/demo3.html
6.擴展思考
到底該不該用CSS reset碉纳？
https://www.zhihu.com/question/23554164
7.參考文獻
張鑫旭-《CSS reset的重新審視–避免樣式重置》：
作者寫的介紹：來勿负，讓我們談一談Normalize.css
http://jerryzou.com/posts/aboutNormalizeCss/
Normalize.css與傳統(tǒng)的CSS Reset有哪些區(qū)別？
