CSS RESET簡述

爲什麼需要CSS RESET

不少瀏覽器的對元素的默認渲染規則導致了在開發頁面的時候我們經常不能準確還原設計圖，所以就需要手動把樣式重置一下，就像一張白紙一樣，這樣自己就可以自由控制頁面的佈局了。

最開始的CSS RESET

相信不少初學CSS的同學都會使用下面的規則來重置樣式

* {
    margin:0;
    padding:0;
}

這樣的好處是顯而易見的，代碼少的可憐，並且達到了我們想要的效果。但是，按我的理解，這樣的寫法會使瀏覽器將所有的頁面元素都重置一遍margin和padding，儘管不是所有的元素都會有默認的margin和padding，這給瀏覽器造成了不必要的負擔。後來，我學着去構建自己的CSS RESET。

body {
    color:#666;
    -webkit-font-smoothing: antialiased;
}

body, input, label, select, option, textarea, button, fieldset, legend {
    font:12px/1.5 Arial, Helvetica, sans-serif,\5b8b\4f53; 
}

body, button, textarea, blockquote,  fieldset,body, legend, dl, dt, dd, h1, h2, h3, h4, h5, h6, hr, input, ul, ol, p, pre, td, th {
    margin:0px;
    padding:0px;
}

input {border:none;}

ul, ol { list-style:none;}

a {text-decoration: none;}

a:hover { text-decoration: underline; }

/*將斜體扶正*/
em {font-style: normal;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*重置hr，需要自己添加背景顏色*/
hr {
    border:none;
    height:1px;
}

以上的總結綜合了這裏 和淘寶首頁。

鏈接裏的文章指出的不少hack和元素，現在我在開發頁面的時候還不會用到，所以就只借鑑了一些我目前會使用到的和理解的樣式。而且我還有一個疑問：爲什麼淘寶和鏈接裏的文章都會重置li和dt這兩個元素的margin和padding，經過我的測試，這兩個兩個元素並沒有默認的margin和padding啊？有知道的同學嗎，留言告訴我爲什麼。。