Reset CSS:
移除 default browser 的 style,任何元素的 margins, paddings, font-sizes 都會被 reset 成一樣的。下面範例可以看到,即使是用 h1
,但h1
到h6
呈現的字體大小都一樣。
範例:
CodePen
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
可以在 codepen 的齒輪點擊後,將 CSS Base 設定為 Reset
結果:
Normalize CSS:
使各個瀏覽器的 style 呈現一致,例如 h1
到 h6
字體都會一樣大,和加上粗體。
範例:
CodePen
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
可以在 codepen 的齒輪點擊後,將 CSS Base 設定為 Normalize
結果:
參考資料:
What is the difference between Normalize.css and Reset CSS?