CSS 重置默認樣式

1. 概述

1.1 說明

css重置樣式主要是為了讓各個瀏覽器的CSS樣式有一個統一的基准，使HTML元素樣式在跨瀏覽器時有一致性的效果。

備注：瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果不對css初始化往往會出現瀏覽器之間的頁面顯示差異。但是初始化樣式也會對SEO有一定的影響，故初始化時盡量使影響最小。

1.2 重置文件

reset.css：傳統的重置樣式文件，重置清零處理來保障統一基准，如(*{ margin:0; padding:0; })。

normailze.css：是一個很小的css，是一種為HTML5准備的優質重置方案(替代reset.css)。(https://necolas.github.io/normalize.css/5.0.0/normalize.css)。

1.2.1 Normalize vs Reset

1.Normalize.css 保護了有價值的默認值

Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多磨人的瀏覽器樣式。這就意味着你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致並盡可能與現代標准符合。

2.Normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端與移動端瀏覽器的bug。這往往超出了Reset所能做到的范圍。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

3.Normalize.css 不會讓你的調試工具變的雜亂

使用Reset最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈，在Normalize.css中就不會有這樣的問題，因為在我們的准則中對多選擇器的使用是非常謹慎的，我們僅會有目的地對目標元素設置樣式。

4.Normalize.css 是模塊化的

這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到的部分（比如表單的一般化）。

5.Normalize.css 擁有詳細的文檔

Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，並且你可以更容易的進行自己的測試。

 2. 重置詳情

 2.1 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");
}

 

2.2 normalize.css

• Normalize.css 在GitHub上的源碼
• 可進行模塊引入normalize.css
• 直接引入normalize.css文件內容