CSS RESET —— 瀏覽器樣式重置

CSS Reset

1. CSS Reset爲何存在？

只要您的客戶存在使用不一樣瀏覽器（ie,firefox,chrome等）的可能，那你就不得不從完美的理想狀態回到現實，由於不一樣核心的瀏覽器對CSS的解析效果呈現各異，致使您所指望的效果跟瀏覽器的「理解」效果有誤差，今天提到的css reset就是用來重置（復位）元素在不一樣核心瀏覽器下的默認值，儘可能保證元素在不一樣瀏覽器下的同一「起跑線」。

——引用自關於CSS Reset

2. CSS Reset該怎麼寫？

CSS reset(css重置)基本上是不須要的，至少能夠說80%的的CSS reset都是沒有必要的，反而增長了頁面CSS

的重寫，尤爲像*{margin:0;}的作法更是要不得（反而破壞了不少UI的兼容性，好比說單複選框等）。我不是一律鄙棄CSS

reset，有些經常使用標籤我也是會簡單重置一下的，並且會避免overwrite（樣式重寫），以保證樣式最精簡，渲染最高效

——摘錄自張鑫旭的這篇文章我是如何對網站CSS進行架構的

3. CSS Reset 示例

3.1 tmall，淘寶商城

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,
form,fieldset,legend,button,input,textarea,th,td  {margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5     tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
et,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

3.2 tudou，土豆網

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
body{color:#000;background:#fff;font-size:12px;line-    height:1.25;font-family:tahoma,arial,\5b8b\4f53,sans-serif}
th,td{text-align:left;vertical-align:top}
h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}
p{margin:0 0 1em 0}
blockquote{margin:0 0 1em 0
a{color:#14647d;text-decoration:none;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:arial,sans-serif}
a:hover{text-decoration:underline}
img{display:block;border:0}
li{list-style:none}
ol{padding:0 0 0 2em}
input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:Arial,sans-serif}
input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}
input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:3px 2px;height:14px}
input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}
input.radio,input.checkbox{margin-left:-2px}
label.radio,label.checkbox{margin-right:5px}

3.3 sohu，搜狐網

/* 全局CSS定義 */
body{font-family:’宋體';text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0}
/* 默認連接顏色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

相信不少人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一我的學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料 喜歡個人文章想與更多資深大牛一塊兒討論和學習的話 歡迎加入個人學習交流羣907694362