CSS基礎篇--css reset重置樣式有那麼重要嗎?

在之前寫html代碼的時候,通常都會在head裏添加劇置樣式reset.css,其內容以下:css

@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");

}html

可是最近在網上看了看網絡文章,也感受有些重置是沒有用的。爲何呢?express

重置的做用到底是什麼?瀏覽器

CSS reset的做用是讓各個瀏覽器的CSS樣式有一個統一的基準,而這個基準更多的就是「清零」!網絡

有時候看到別人網站站的一些重置是這樣的:app

*{ margin:0; padding:0; }

這樣的寫法是極不推薦的。
如今來看重置表發現:網站

  1. div標籤默認有margin值嗎?有padding值嗎?怎麼會想到應用div{margin:0; padding:0;}屬性呢?答案確定沒有。
  2. dt標籤有默認的marginpadding值就是0,什麼還要使用呢?
  3. li標籤默認有margin值嗎?有padding值嗎?沒有!
  4. code標籤是個屬於inline水平的元素,竟然也扯到marginpadding的重置,沒有必要。
  5. fieldset, legend這兩個90年代的標籤你的網站上使用了嗎?使用機率不足1%的標籤也拿來重置,也不必。

css真的重置也就那麼幾個經常使用的標籤而已,你的頁面通常都用到什麼標籤?this

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

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

這樣的CSS reset纔是高效的,簡潔的,其餘一些標籤均可以去掉的,沒有必要。spa

固然css重置的優勢,缺點都不說了,估計內心都很是有數的,仍是要根據實際項目來。code

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

相關文章
相關標籤/搜索