reset css 的方法總結！

   本着中華名族的優良傳統，今天又從度媽那裏來借鑑各路大牛的文章了！沒辦法沒辦法，在慕課上做個扁平化博客的時候，那老師偷懶不寫reset css的代碼，兩句話就忽悠過去了，表示非常不甘心，這玩意，究竟有多少種寫法有多少套路！好吧，讓我來摘抄摘抄！

   打開各大網站，套路不一，讓我這菜鳥，陷入了沉思當中，我究竟該抄誰的好啊！我還是學生狗呢,身邊也沒工作經驗的大牛來說句，這句樣式多餘的去掉去掉！算了，埋頭看吧，抄襲吧!大牛也肯定不會看我寫的博文的，只希望，哪位路過的大牛，留下幾個字的金玉良言吧！大牛，給點指導吧！

  

 開始正文！！！我只是用一種逗比的方式來分享我看過的知識而已，基本都是抄襲的，大家不要吐槽我！！等過個三五年，我一定統統原創！喜歡我就關注我吧！

    

 

一.屌絲型寫法（新手專用）

* {
      padding: 0;
      margin: 0;
}

從初學前端已有三月之餘，這句話陪伴我至今，雖然視頻中看到那些大牛門，寫reset css時候的時候總是備好了一大串一大串的代碼！然後沒理解的前提下，不敢亂改，於是複製粘貼，練習中直接這句話代替了！

 

二.高逼格型（玉伯寫的！等我過幾年再來研究）

 

/* 清除內外邊距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表單元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 設置默認字體 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何編碼下都無問題 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字體 */
small { font-size: 12px; } /* 小於 12px 的中文很難閱讀，讓 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.這裏用了屬性選擇符，ie6 下無效果 */
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表單元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭車：讓鏈接裏的 img 無邊框 */
/* 注：optgroup 無法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 讓非ie瀏覽器默認也顯示垂直滾動條，防止因滾動條引起的閃爍 */
html { overflow-y: scroll; }

 

 

三.濃縮實用型（出自Perishable Press ）

 

<pre name="code" class="html">* {
       vertical-align: baseline;
       font-weight: inherit; 
       font-family: inherit; 
       font-style: inherit;
       font-size: 100%;
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

 

 

 

四.短小精悍型（Poor Man   這貨叫窮男人嘛？原來我英語水平只能理解這麼膚淺了）

 

html, body { 
       padding: 0; 
       margin: 0; 
}
html {
       font-size:1em;
} 
body {
       font-size:100%;
} 
a img, :link img, :visited img {
       border:0px;
} 

五.YUI（雅虎專用高逼格）

 

 

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（寫css權威指南的那個大神）

 

 

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: “” “”; 
}

濃縮一下 這位大牛的代碼，你可以這樣寫！

 

 

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

七.Chris Poteet’s Reset CSS（chris 是compass的創建者！！有多牛逼就不用說了，可以鏈接去了解下！）

 

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

不寫了不寫了，曉得幾個高逼格的能裝逼就行了，太多國外的大神了！我抄不過來了