本篇同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

↓ 今日學習重點 ↓

• 了解 CSS 為什麼需要 Reset？

• 了解 CSS 有哪些 Reset 的方法？

CSS 為什麼需要 Reset？

不同的瀏覽器會有不同的預設樣式，可能包含字體大小、邊距、填充、行高等等。

這會導致網頁的外觀不一致，所以通常我們在最一開始開發時，就會需要 Reset CSS。將所有瀏覽器的預設樣式歸零，從頭開始設計自己的網頁樣式，就不用擔心寫出來的東西受到預設風格影響。

寫個簡單粗暴的 Reset

如果今天只是要簡單 Demo 或練習排版，我們可以快速寫這段 Reset 樣式。

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

只不過這樣寫當然還不夠周全，通常會推薦使用下面受大家受歡迎的 CSS Reset。

常見的 CSS Reset

最受歡迎的選擇 Reset 有以下兩種，只要載下來，在 HTML 中引用就可以了。

CSS Reset 要引用在最開頭，而自己寫的 CSS 則是放在後面，因為它的目的就是要在「一開始」幫你調整好各瀏覽器之間的差異。

1. Eric Meyer's Reset CSS

連結：CSS Tools: Reset CSS

這是最早的 CSS Reset 方法之一，是由網頁設計師 Eric Meyer 所寫的。它的目標是將所有 HTML 元素的樣式歸零，把所有 HTML 的樣式都清空了，包含所有外邊距、內邊距、列表樣式等都強制歸零。

2. Normalize.css

連結：Normalize.css: Make browsers render all elements more consistently.

Normalize.css 較上一個完全歸零的概念不太一樣，它的目標是保留有用的預設值，讓開發者不需要針對每一個標籤重新寫樣式，並且統一瀏覽器之間不一致的地方、修正瀏覽器的 Bug。

小結

Reset.css 與 Normalize.css 各有優缺，兩個目前都很多人使用，可以依據需求擇一使用即可。另外，這兩個在 box-sizing 方面，都沒有幫你把所有元素變為 border-box，所以這個部分要自己加喔！

使用框架時

如果你有使用 CSS 框架，框架通常都已經有包含 CSS Reset，例如：Bootstrap 使用的就是 Normalize.css（Reboot · Bootstrap v5.3）；而 Tailwind 使用的是由 Normalize.css 改良的 modern-normalize（Preflight - Tailwind CSS）。

各個框架實際是如何實作 CSS Reset，還需要去詳讀各自的文件。

好的，今天就先到這邊了。
你可以依據需求或個人喜好選擇其中一個 CSS Reset 方法來試試看。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。