CSS-Reset

在每一個瀏覽器，都會有瀏覽器自帶的 CSS 樣式檔案，用以呈現各個瀏覽器特有的預設外觀。雖然有預設樣式的好處是，當開發者沒有特別定義樣式時，至少會有基礎的排版、樣式效果；可是壞處是，當開發者自定義樣式時，經常會因此而出現不可預期的狀況。
所以通常在做網頁切版時，都會用 CSS Reset，將瀏覽器預設的樣式通通歸零，包含行距離、字距、margin、padding⋯ 等。

Reset 版本

最普遍常用的 CSS-Reset 為 Eric Meyer 版本 ，下方也以此版本說明。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

可以看到內容即為將很多樣式都歸零，如此一來，不論使用者的瀏覽器版本，在 CSS Reset 之後，都是統一無樣式的版本。而開發過程中，也不會因為 各個瀏覽器各自的預設值，而影響到開發者重新自定義的樣式，進而發生不可預知的狀況。

如何 Reset？

將 Eric Meyer 版本 寫好的程式碼內容，全部複製一份到個人專案中的一個 CSS 檔案中，可以命名為 reset.css 接著在專案中的每個 html 都引入 reset.css ，這樣就可以確定每個頁面在一開始的樣式都被歸零。

重點提醒！

一定要在一開始就引入 CSS Reset，避免 CSS Reset 反而蓋掉開發者自行定義的樣式。

資料來源

金魚都能懂網頁設計入門 : CSS Reset

小事之 CSS Reset 與 CSS normalize