重置 CSS ( Reset CSS )
重置 CSS ( Reset CSS ) 可以清除 HTML 元素自帶的預設樣式，讓這些元素在不同瀏覽器中會有一致的顯示效果，甚至也可以讓整份 CSS 文件更加精簡，這篇教學會引導大家撰寫重置 CSS 的程式碼，並提供另外兩種常用的重置 CSS 方法。
快速導覽：
認識重置 CSS ( Reset CSS )
HTML 為了讓編輯網頁時可以立刻看到效果，許多 HTML 元素會有「預設樣式」，但這些預設樣式在不同瀏覽器會有些微不同的呈現樣貌，因此往往不受網頁設計師青睞，所以一些 CSS 專家在撰寫正式的 CSS 之前，替元素加入一些樣式覆蓋預設樣式，達到在不同瀏覽器中或在不同排版狀況下，仍然會有一致的呈現結果，這就是「重置 CSS ( Reset CSS )」的由來，除了部分表單元素需要針對特定瀏覽器進行處理處理，大多數預設樣式都可透過標準的 CSS 覆蓋或重設樣式。
需要重置的 CSS 樣式
瀏覽器為了讓「沒有樣式」的網頁能夠正常顯示，各個元素除了預設樣式，瀏覽器還會額外替元素添加例如行高、間距、邊框等樣式，因為是瀏覽器所添加的預設值，所以部分樣式有可能會不同 ( 例如字體、行高等 )，下方會列出通常都需要重置 CSS 的樣式：
| 樣式 | 預設值 |
|---|---|
position |
所有元素的預設都是 static。 |
box-sizing |
所有元素的預設都是 border-box。 |
padding |
採用瀏覽器預設值 ( 通常是 0 )，部分元素有自己的設定值，例如 li、dd。 |
margin |
採用瀏覽器預設值 ( 通常是 0 )，部分元素有自己的設定值，例如 h1～h6、p、ul 等。 |
font-size |
採用瀏覽器預設值 ( 通常是 16px )，部分元素有自己的設定值，並使用 em 為單位。 |
font-family |
採用瀏覽器預設值 ( 系統字體 )，部分元素有自己的設定值，例如 pre、code 等。 |
line-height |
採用瀏覽器預設值或字體設定值 ( 通常是 1.1～1.2 )。 |
border |
採用瀏覽器預設值 ( 通常沒有邊框 )，部分元素有自己的設定值，例如 table、td、th。 |
除了上述的樣式，HTML 的 input、button 等「表單」元素，各家瀏覽器會額外提供背景色、邊框、邊距、內距等獨立樣式，這些樣式有時還必須使用廠商開頭的特殊樣式屬性才能修改 ( 例如 -webkit-、-moz- )，因此在操作重置 CSS 也必須注意是否有更動到相關樣式，下方使用四種不同的瀏覽器開啟同一個網頁，網頁中從上而下分別是 h1、h2、h3、input、button、select 和 table，可以發現各家瀏覽器使用預設值看到的結果都不太相同，這也是為什麼需要重置 CSS 的原因。
撰寫自己的重置 CSS
理解各種 HTML 元素的預設值後，就可以開始撰寫「自己專屬」的重置 CSS，下方範例因為使用了重置 CSS，使用四種瀏覽器打開後，就會呈現較為一致的樣貌 ( 如果有他樣式就需要自行撰寫測試 )，需要注意不同的瀏覽器對於「表單元素」的樣式都有所不同，如果真的要完全一致，仍然必須多次測試。
<!-- HTML 程式碼 -->
<h1>Apple</h1>
<h2>Banana</h2>
<h3>OXXO</h3>
<h4>Orange</h4>
<form>
<input name="user"> <button type="submit">送出</button> <button type="reset">清空</button>
</form>
<form>
<select>
<optgroup label="iPhone" multiple>
<option value="14p">iPhone 14 Pro</option>
<option value="14" selected>iPhone 14</option>
<option value="13p" disabled>iPhone 13 Pro</option>
</optgroup>
</select>
</form>
<ul><li>apple</li><li>banana</li><li>cat</li></ul>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<!-- CSS 程式碼 -->
<style>
/* font 相關樣式都有繼承特性，加上網頁元素使用 em 尺寸，只要寫在 html 裡就可以套用 */
/* 因為表單元素本身自帶瀏覽器樣式，必須獨立撰寫覆蓋 */
html, form, input, button, select, label, textarea {
font-family: arial, sans-serif;
font-size: 16px;
line-height: 1.1;
}
/* margin、padding 等樣式沒有繼承特性，因此使用 * 讓網頁中所有元素都套用 */
* {
box-sizing: padding-box;
position: relative;
padding: 0;
margin: 0;
}
/* 部分表單元素會使用瀏覽器樣式，需要獨立撰寫 */
input, button, select {
border: 1px solid #000;
background: none;
}
/* 表格元素有其獨立樣式，需要獨立撰寫 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 清單元素有其獨立樣式，需要獨立撰寫 */
ol, ul {
list-style: none;
}
</style>
使用 Eric Meyer 版本重置 CSS
Eric Meyer 是知名「CSS 大全」書籍的作者，許多人也會套用其所撰寫的重置 CSS，下方程式碼為 Eric Meyer 的重置 CSS，但由於強制設定了文字尺寸，導致所有元素文字大小都相同，且並沒有針對表單元素進行設定，因此需要額外處理表單元素，使用時要特別注意。
/* 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; /* 需要 border 的元素需要額外設定 */
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;
}
使用 normalize.css 重置 CSS
normalize.css 是另外頗具盛名的重置 CSS，內容主要是針對表單、特殊文字樣式進行重置，但整體太過針對特定文字樣式，使用時比較沒有「重置」的感受，仍然必須要自己轉寫許多樣式輔助。
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body{ margin: 0;}
main{display: block;}
h1{
font-size: 2em;
margin: .67em 0;
}
hr{
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre{
font-family: monospace,monospace;
font-size: 1em
}
a{background-color:transparent}
abbr[title]{
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,strong{font-weight: bolder}
code,kbd,samp{
font-family: monospace,monospace;
font-size: 1em;
}
small{font-size: 80%;}
sub,sup{
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub{bottom: -.25em;}
sup{top: -.5em;}
img{border-style: none;}
button,input,optgroup,select,textarea{
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,input{overflow: visible;}
button,select{text-transform: none;}
[type=button],[type=reset],[type=submit],button{
-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
border-style:none;
padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline: 1px dotted ButtonText;}
fieldset{padding: .35em .75em .625em;}
legend{
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress{vertical-align: baseline;}
textarea{overflow: auto;}
[type=checkbox],[type=radio]{
box-sizing: border-box;
padding: 0;
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
height: auto;
}
[type=search]{
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration{
-webkit-appearance: none
}
::-webkit-file-upload-button{
-webkit-appearance: button;
font: inherit;
}
details{display: block;}
summary{display: list-item;}
template{display: none;}
[hidden]{display: none;}
/*# sourceMappingURL=normalize.min.css.map */
小結
透過重置 CSS 的方式，可以讓重新設定網頁元素的預設樣式，也能讓後續開發跨瀏覽器的頁面樣式更為一致，不論使用哪種方法，都建議稍微了解元素本身的樣式，如此一來會更容易處理重置 CSS。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～