reset.css和normalize.css分別是做什么的?為什么推薦使用 nomalize.css?

reset.css
在HTML標簽在瀏覽器里有默認的樣式萧吠,例如 p 標簽有上下邊距左冬,strong標簽有字體加粗樣式,em標簽有字體傾斜樣式纸型。不同瀏覽器的默認樣式之間也會有差別拇砰,例如ul默認帶有縮進的樣式,在IE下狰腌,它的縮進是通過margin實現(xiàn)的除破,而Firefox下,它的縮進是由padding實現(xiàn)的琼腔。在切換頁面的時候瑰枫,瀏覽器的默認樣式往往會給我們帶來麻煩,影響開發(fā)效率丹莲。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉光坝,更準確說就是通過重新定義標簽樣式』浚“覆蓋”瀏覽器的CSS默認屬性教馆。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉逊谋!這就是CSS reset擂达。
normalize.css
Normalize.css是一種CSS reset的替代方案。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)站上赫蛇。

Normalize vs Reset
1. Normalize.Css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式,強行使得元素有相同的視覺效果雾叭。相比之下悟耘,Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式织狐。當(dāng)一個元素在不同的瀏覽器中有不同的默認值時暂幼,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中就不會有這樣的問題套菜。
4. Normalize.Css 是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分,這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值设易。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分(比如表單的一般化)逗柴。
5. Normalize.Css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明顿肺。這意味著你可以找到每一行代碼具體完成了什么工作戏溺、為什么要寫這句代碼、瀏覽器之間的差異屠尊,并且你可以更容易地進行自己的測試旷祸。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市讼昆,隨后出現(xiàn)的幾起案子托享,更是在濱河造成了極大的恐慌,老刑警劉巖浸赫,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闰围,死亡現(xiàn)場離奇詭異,居然都是意外死亡既峡,警方通過查閱死者的電腦和手機羡榴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來运敢,“玉大人校仑,你說我怎么就攤上這事〈荩” “怎么了迄沫?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長涉枫。 經(jīng)常有香客問我邢滑,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任困后,我火速辦了婚禮乐纸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘摇予。我一直安慰自己汽绢,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布侧戴。 她就那樣靜靜地躺著宁昭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪酗宋。 梳的紋絲不亂的頭發(fā)上积仗,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機與錄音蜕猫,去河邊找鬼寂曹。 笑死,一個胖子當(dāng)著我的面吹牛回右,可吹牛的內(nèi)容都是我干的隆圆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼翔烁,長吁一口氣:“原來是場噩夢啊……” “哼渺氧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蹬屹,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤侣背,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后哩治,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秃踩,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡衬鱼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年业筏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸟赫。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒜胖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抛蚤,到底是詐尸還是另有隱情台谢,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布岁经,位于F島的核電站朋沮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏缀壤。R本人自食惡果不足惜樊拓,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一纠亚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧筋夏,春花似錦蒂胞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赴叹,卻和暖如春鸿染,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乞巧。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工牡昆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人摊欠。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓丢烘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親些椒。 傳聞我的和親對象是個殘疾皇子播瞳,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容