成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)篇--css reset重置樣式有那么重要嗎？

rockswang / 3508人閱讀

摘要：在以前寫代碼的時(shí)候，一般都會(huì)在里添加重置樣式，其內(nèi)容如下但是最近在網(wǎng)上看了看網(wǎng)絡(luò)文章，也感覺有些重置是沒有用的。當(dāng)然重置的優(yōu)點(diǎn)，缺點(diǎn)都不說了，估計(jì)心里都非常有數(shù)的，還是要根據(jù)實(shí)際項(xiàng)目來。后來主管給我推薦了一款替代重置的替代方案，那就是用。

在以前寫html代碼的時(shí)候，一般都會(huì)在head里添加重置樣式reset.css，其內(nèi)容如下：

@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;

}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {    border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
    font-size:200%;
    font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}

a:active{noOutline:expression(this.onFocus=this.blur());}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
 html .clearfix { height: 1%;}
.clearfix {display: block;}

*html img.png{
_background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="" + this.src + "", sizingMethod="image")",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");

}

但是最近在網(wǎng)上看了看網(wǎng)絡(luò)文章，也感覺有些重置是沒有用的。為什么呢？

重置的作用究竟是什么？

CSS reset的作用是讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)，而這個(gè)基準(zhǔn)更多的就是“清零”！

有時(shí)候看到別人網(wǎng)站站的一些重置是這樣的：

*{ margin:0; padding:0; }

這樣的寫法是極不推薦的。
現(xiàn)在來看重置表發(fā)現(xiàn)：

div標(biāo)簽?zāi)J(rèn)有margin值嗎？有padding值嗎？怎么會(huì)想到應(yīng)用div{margin:0; padding:0;}屬性呢？答案肯定沒有。

dt標(biāo)簽有默認(rèn)的margin與padding值就是0，什么還要使用呢？

li標(biāo)簽?zāi)J(rèn)有margin值嗎？有padding值嗎？沒有！

code標(biāo)簽是個(gè)屬于inline水平的元素，居然也扯到margin與padding的重置，沒有必要。

fieldset, legend這兩個(gè)90年代的標(biāo)簽?zāi)愕木W(wǎng)站上使用了嗎？使用概率不足1%的標(biāo)簽也拿來重置，也沒必要。

css真的重置也就那么幾個(gè)常用的標(biāo)簽而已，你的頁面一般都用到什么標(biāo)簽？

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} 

 ol,ul{margin:0; padding:0;}

這樣的CSS reset才是高效的，簡(jiǎn)潔的，其他一些標(biāo)簽都可以去掉的，沒有必要。

當(dāng)然css重置的優(yōu)點(diǎn)，缺點(diǎn)都不說了，估計(jì)心里都非常有數(shù)的，還是要根據(jù)實(shí)際項(xiàng)目來。

后來主管給我推薦了一款替代reset.css重置的替代方案，那就是用Normalize.css。在后面文章里把它的用法等再列出來。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111138.html

相關(guān)文章

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

    newtrek 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

    keke 評(píng)論0 收藏0

  • 前端練級(jí)攻略(第一部分)

    摘要：第一部分介紹了如何使用和開發(fā)接口。由于系統(tǒng)變得越來越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來管理復(fù)雜性。當(dāng)您第一次得知有預(yù)處理器和后處理器時(shí)，你很有可能在任何地方已經(jīng)使用它們。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及資料，被學(xué)習(xí)的資料壓得喘不過氣來，甚至不知道從哪里開始。 本指南列出前端學(xué)習(xí)路線，并提供了平時(shí)收藏的一些...

    qpal 評(píng)論0 收藏0

  • CSS進(jìn)階篇--Normalize.css的使用（重置表）

    摘要：相比于傳統(tǒng)的，是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。任何人都能夠提交問題報(bào)告或者提交補(bǔ)丁。 本文譯自Normalize.css官網(wǎng): http://nicolasgallagher.com/a... Normalize.css 只是一個(gè)很小的CSS文件，但...

    dack 評(píng)論0 收藏0

  • 關(guān)于CSS Reset 那些事（四）之 構(gòu)架CSS基礎(chǔ)樣式庫(kù)

    摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫(kù)基礎(chǔ)庫(kù)構(gòu)思為什么要做基礎(chǔ)庫(kù)我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁面，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...

    mj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<