reset.css和normalize.css的區(qū)別比較

reset.css

在HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式币砂,例如 p 標(biāo)簽有上下邊距芒率,strong標(biāo)簽有字體加粗樣式惶看,em標(biāo)簽有字體傾斜樣式。不同瀏覽器的默認(rèn)樣式之間也會(huì)有差別裂明,例如ul默認(rèn)帶有縮進(jìn)的樣式椿浓,在IE下,它的縮進(jìn)是通過margin實(shí)現(xiàn)的闽晦,而Firefox下扳碍,它的縮進(jìn)是由padding實(shí)現(xiàn)的。在切換頁(yè)面的時(shí)候尼荆,瀏覽器的默認(rèn)樣式往往會(huì)給我們帶來麻煩左腔,影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉捅儒,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式液样。“覆蓋”瀏覽器的CSS默認(rèn)屬性巧还。最最簡(jiǎn)單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉鞭莽!這就是CSS reset。

normalize.css

Normalize.css是一種CSS reset的替代方案麸祷。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)站上。

Normalize vs Reset

1. Normalize.Css 保護(hù)了有價(jià)值的默認(rèn)值

Reset通過為幾乎所有的元素施加默認(rèn)樣式困食,強(qiáng)行使得元素有相同的視覺效果边翁。相比之下,Normalize.css保持了許多默認(rèn)的瀏覽器樣式硕盹。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式符匾。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí),Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合瘩例。

2. Normalize.Css 修復(fù)了瀏覽器的Bug

它修復(fù)了常見的桌面端和移動(dòng)端瀏覽器的bug待讳。這往往超出了Reset所能做到的范疇芒澜。關(guān)于這一點(diǎn),Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置创淡、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出南吮、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug琳彩。

3. Normalize.Css 不會(huì)讓你的調(diào)試工具變的雜亂

使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈。在Normalize.css中就不會(huì)有這樣的問題部凑。

4. Normalize.Css 是模塊化的

這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分露乏,這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分(比如表單的一般化)涂邀。

5. Normalize.Css 擁有詳細(xì)的文檔

Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試瘟仿。這個(gè)文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作比勉、為什么要寫這句代碼劳较、瀏覽器之間的差異,并且你可以更容易地進(jìn)行自己的測(cè)試浩聋。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末观蜗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子衣洁,更是在濱河造成了極大的恐慌墓捻,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坊夫,死亡現(xiàn)場(chǎng)離奇詭異砖第,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)环凿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門梧兼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拷邢,你說我怎么就攤上這事袱院。” “怎么了瞭稼?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵忽洛,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我环肘,道長(zhǎng)欲虚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任悔雹,我火速辦了婚禮复哆,結(jié)果婚禮上欣喧,老公的妹妹穿的比我還像新娘。我一直安慰自己梯找,他們只是感情好唆阿,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锈锤,像睡著了一般驯鳖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上久免,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天浅辙,我揣著相機(jī)與錄音,去河邊找鬼阎姥。 笑死记舆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的呼巴。 我是一名探鬼主播泽腮,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼伊磺!你這毒婦竟也來了盛正?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤屑埋,失蹤者是張志新(化名)和其女友劉穎豪筝,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體摘能,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡续崖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了团搞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片严望。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖逻恐,靈堂內(nèi)的尸體忽然破棺而出像吻,到底是詐尸還是另有隱情,我是刑警寧澤复隆,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布拨匆,位于F島的核電站,受9級(jí)特大地震影響挽拂,放射性物質(zhì)發(fā)生泄漏惭每。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一亏栈、第九天 我趴在偏房一處隱蔽的房頂上張望台腥。 院中可真熱鬧宏赘,春花似錦、人聲如沸黎侈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)峻汉。三九已至箕母,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間俱济,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工钙勃, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛛碌,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓辖源,卻偏偏與公主長(zhǎng)得像蔚携,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子克饶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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