原文
大綱
1、什么是css reset?
2瞄桨、CSS reset的實例
1讶踪、什么是css reset?
個人理解：就是讓不同瀏覽器的初始化的css樣式統(tǒng)一
1.1、在當(dāng)今網(wǎng)頁設(shè)計/開發(fā)實踐中柱查，使用CSS來為語義化的(X)HTML標(biāo)記添加樣式風(fēng)格是重要的關(guān)鍵云石。在設(shè)計師們的夢想中都存在著這樣的一個完美世界:所有的瀏覽器都能夠理解和適用多有CSS規(guī)則，并且呈現(xiàn)相同的視覺效果(沒有兼容性問題)淋硝。但是宽菜，我們并沒有生活在這個完美的世界，現(xiàn)實中發(fā)生的失竊卻總是恰恰相反继谚，很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現(xiàn)犬庇。
1.2、當(dāng)今流行的瀏覽器(如:Firefox臭挽、Opera、Internet Explorer葬荷、Chrome纽帖、Safari等等)中，有一些都是以自己的方式去理解CSS規(guī)范扒吁，這就會導(dǎo)致有的瀏覽器對CSS的解釋與設(shè)計師的CSS定義初衷相沖突室囊，使得網(wǎng)頁的樣子在某些瀏覽器下能正確按照設(shè)計師的想法顯示，但有些瀏覽器卻并沒有按照設(shè)計師想要的樣子顯示出來盼铁，這就導(dǎo)致瀏覽器的兼容性問題尝偎。更糟的是焚碌，有的瀏覽器完全無視CSS的一些聲明和屬性。
1.3抖僵、正因為上述沖突和問題依然存在于這個”不完美的世界”醒陆，所以一些設(shè)計師想到了一種避免瀏覽器兼容性問題的方法，那就是CSS Reset世吨，什么是CSS Reset呻征？我們可以把它叫做CSS重設(shè)，也有人叫做CSS復(fù)位沐祷、默認CSS、CSS重置等胞锰。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同兢榨，導(dǎo)致設(shè)計師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值凌那，所以我們要先定義好一些CSS樣式帽蝶，來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS块攒，這樣就能避免發(fā)生這種問題。
2麦锯、CSS reset的實例
以下的css reset的實例都是我從網(wǎng)上收集到琅绅，平時也是根據(jù)情況選取其中的一個來使用千扶，讀者也可以根據(jù)自己的喜好選取一個來使用澎羞，希望能對讀者有所幫助。
2.1妆绞、最簡化的CSS Reset(重設(shè))
/*
這是最普遍最簡單的CSS重設(shè)括饶，將所有元素的padding和margin值都設(shè)為0，可以避免一些
瀏覽器在理解這兩個屬性默認值上的”分歧”启盛。（不推薦這個方法，太過于粗暴
*/
* {
padding: 0;
margin: 0;
}
2.3卧抗、CSSLab CSS Reset
/*
參考網(wǎng)址：http://blog.bingo929.com/css-reset-collection.html
*/
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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
} caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
2.3社裆、張鑫旭的css-reset
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
