目前比較全的CSS重設(shè)(reset)方法總結(jié)

原文出處:http://blog.bingo929.com/css-reset-collection.html
在當(dāng)今網(wǎng)頁設(shè)計(jì)/開發(fā)實(shí)踐中颅围，使用CSS來為語義化的(X)HTML標(biāo)記添加樣式風(fēng)格是重要的關(guān)鍵志鞍。在設(shè)計(jì)師們的夢想中都存在著這樣的一個完美世界:所有的瀏覽器都能夠理解和適用多有CSS規(guī)則，并且呈現(xiàn)相同的視覺效果(沒有兼容性問題)痹换。但是征字，我們并沒有生活在這個完美的世界，現(xiàn)實(shí)中發(fā)生的失竊卻總是恰恰相反娇豫，很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現(xiàn)匙姜。
當(dāng)今流行的瀏覽器(如:Firefox、Opera冯痢、Internet Explorer氮昧、Chrome、Safari等等)中浦楣，有一些都是以自己的方式去理解CSS規(guī)范袖肥，這就會導(dǎo)致有的瀏覽器對CSS的解釋與設(shè)計(jì)師的CSS定義初衷相沖突，使得網(wǎng)頁的樣子在某些瀏覽器下能正確按照設(shè)計(jì)師的想法顯示振劳，但有些瀏覽器卻并沒有按照設(shè)計(jì)師想要的樣子顯示出來昭伸，這就導(dǎo)致瀏覽器的兼容性問題。更糟的是澎迎，有的瀏覽器完全無視CSS的一些聲明和屬性庐杨。
正因?yàn)樯鲜鰶_突和問題依然存在于這個”不完美的世界”，所以一些設(shè)計(jì)師想到了一種避免瀏覽器兼容性問題的方法夹供，那就是CSS Reset灵份，什么是CSS Reset？我們可以把它叫做CSS重設(shè)哮洽，也有人叫做CSS復(fù)位填渠、默認(rèn)CSS、CSS重置等鸟辅。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同氛什，導(dǎo)致設(shè)計(jì)師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認(rèn)值來為沒有定義的樣式賦值匪凉，所以我們要先定義好一些CSS樣式枪眉，來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問題再层。
今天總結(jié)收集了15套CSS重設(shè)實(shí)例贸铜，您可以在前端開發(fā)工作中進(jìn)行參考和使用，有些是很簡化的CSS Reset聂受，有些則是非常復(fù)雜非常全面的CSS Reset蒿秦，至于使用哪套，全看您的愛好或需要蛋济。
一.最簡化的CSS Reset(重設(shè)) :

* {
padding: 0;
margin: 0;
}

這是最普遍最簡單的CSS重設(shè)棍鳖，將所有元素的padding和margin值都設(shè)為0，可以避免一些瀏覽器在理解這兩個屬性默認(rèn)值上的”分歧”碗旅。

* {
padding: 0;
margin: 0;
border: 0;
}

這是在上一個重設(shè)的基礎(chǔ)上添加了對border屬性的重設(shè)渡处，初始值為0的確能避免一些問題镜悉。

* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

在前兩個的基礎(chǔ)上添加了outline屬性的重設(shè)，防止一些沖突骂蓖。
二.濃縮實(shí)用型CSS Reset(重設(shè)):

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

該CSS重設(shè)方法出自Perishable Press，這是他常用的方法川尖。
三.Poor Man 的CSS Reset:

html, body {
padding: 0;
margin: 0;
}

html {
font-size:1em;
}

body {
font-size:100%;
}

a img, :link img, :visited img {
border:0px;
}

這個重設(shè)方法將html和body下元素的padding和margin都設(shè)為0登下，并分別為html標(biāo)簽和body標(biāo)簽下的所有元素設(shè)置了初始的字體大小，最重要的是把有鏈接的圖片的默認(rèn)邊框去掉了叮喳。
四.Siolon’s Global Reset

* {
vertical-align: baseline;
font-family: inherit;
fo
nt-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

五.Shaun Inman’s Global Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: ”;
}
a, ins {
text-decoration: none;
}

六.Yahoo(YUI) CSS Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym {
border: 0;
}

七.Eric Meyer’s CSS Reset

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

八.Condensed Meyer Reset:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}

九.Ateneu Popular CSS Reset

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;
}
a, a:link, a:visited, a:hover, a:active{
text-decoration:none
}
table {
border-collapse: separate;
border-spacing: 0;
}
th, td {
text-align: left;
font-weight: normal;
}
img, iframe {
border: none;
text-decoration:none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十.Chris Poteet’s Reset CSS

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

十一.Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

十二.Christian Montoya Reset CSS

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

十三.Rudeworks Reset CSS

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=’text’], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

十四. Anieto2K Reset CSS

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,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十五.CSSLab CSS Reset

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;}

好了被芳，CSS重設(shè)目前先總結(jié)到這里，這15套重設(shè)方法其實(shí)都是有共同點(diǎn)的馍悟，也許有的實(shí)現(xiàn)方法不同畔濒，但大部分都是同一個目的，就是為了讓更多的瀏覽器能顯示同樣的效果锣咒。有了這些CSS重設(shè)作為資料和參考侵状，也許會對你的工作有所幫助甚至提高效率，但是毅整，畢竟這些重設(shè)都是別人寫的趣兄，你完全也可以為自己量身定制一套CSS重設(shè)。

最后編輯于：2017.12.04 23:16:45

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末悼嫉，一起剝皮案震驚了整個濱河市艇潭，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌戏蔑，老刑警劉巖蹋凝，帶你破解...
沈念sama閱讀 221,695評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異总棵，居然都是意外死亡鳍寂，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,569評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門情龄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來伐割，“玉大人，你說我怎么就攤上這事刃唤「粜模” “怎么了？”我有些...
開封第一講書人閱讀 168,130評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵尚胞，是天一觀的道長硬霍。經(jīng)常有香客問我，道長笼裳，這世上最難降的妖魔是什么唯卖？我笑而不...
開封第一講書人閱讀 59,648評論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任粱玲，我火速辦了婚禮，結(jié)果婚禮上拜轨，老公的妹妹穿的比我還像新娘抽减。我一直安慰自己，他們只是感情好橄碾，可當(dāng)我...
茶點(diǎn)故事閱讀 68,655評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布卵沉。她就那樣靜靜地躺著，像睡著了一般法牲。火紅的嫁衣襯著肌膚如雪史汗。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,268評論 1贊 309
城市分裂傳說
那天拒垃，我揣著相機(jī)與錄音停撞，去河邊找鬼。笑死悼瓮，一個胖子當(dāng)著我的面吹牛戈毒，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播横堡，決...
沈念sama閱讀 40,835評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼副硅，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了翅萤？” 一聲冷哼從身側(cè)響起恐疲，我...
開封第一講書人閱讀 39,740評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎套么，沒想到半個月后培己，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,286評論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡胚泌，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,375評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年省咨，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片玷室。...
茶點(diǎn)故事閱讀 40,505評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡零蓉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出穷缤，到底是詐尸還是另有隱情敌蜂，我是刑警寧澤，帶...
沈念sama閱讀 36,185評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布津肛，位于F島的核電站章喉，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜秸脱，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,873評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一落包、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧摊唇，春花似錦咐蝇、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,357評論 0贊 24
一樁弒父案有序，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至吮便，卻和暖如春笔呀，著一層夾襖步出監(jiān)牢的瞬間幢踏，已是汗流浹背髓需。一陣腳步聲響...
開封第一講書人閱讀 33,466評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留房蝉，地道東北人僚匆。一個月前我還...
沈念sama閱讀 48,921評論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長得像搭幻，于是被迫代替她去往敵國和親咧擂。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,515評論 2贊 359

目前比較全的CSS重設(shè)(reset)方法總結(jié)

推薦閱讀更多精彩內(nèi)容