在以前寫html代碼的時候,一般都會在head里添加重置樣式reset.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%; /*background: transparent;*/ } 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;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /*png css hack for ie6*/ *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"); }
但是最近在網上看了看網絡文章,也感覺有些重置是沒有用的。為什么呢?
重置的作用究竟是什么?
CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統一的基准,而這個基准更多的就是“清零”!
有時候看到別人網站站的一些重置是這樣的:
*{ margin:0; padding:0; }
這樣的寫法是極不推薦的。
現在來看重置表發現:
1. div標簽默認有margin值嗎?有padding值嗎?怎么會想到應用div{margin:0; padding:0;}屬性呢?答案肯定沒有。
2. dt標簽有默認的margin與padding值就是0,什么還要使用呢?
3. li標簽默認有margin值嗎?有padding值嗎?沒有!
4. code標簽是個屬於inline水平的元素,居然也扯到margin與padding的重置,沒有必要。
5. fieldset, legend這兩個90年代的標簽你的網站上使用了嗎?使用概率不足1%的標簽也拿來重置,也沒必要。
css真的重置也就那么幾個常用的標簽而已,你的頁面一般都用到什么標簽?
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,ul{margin:0; padding:0;}
這樣的CSS reset才是高效的,簡潔的,其他一些標簽都可以去掉的,沒有必要。
當然css重置的優點,缺點都不說了,估計心里都非常有數的,還是要根據實際項目來。
后來主管給我推薦了一款替代reset.css重置的替代方案,那就是用Normalize.css。在后面文章里把它的用法等再列出來。
