網頁樣式跟想像中不一樣，你 CSS Reset 了嗎？

當透過 CSS 切完網頁版面後，發現網頁跟自己想像或是設計稿上顯示的有落差，是發生了什麼事情？

CSS Reset 出現與存在意義

之所以會有 CSS Reset 出現，是因為早期瀏覽器在渲染 HTML 的 CSS 樣式標準不一，導致同一段語法在不同家瀏覽器所渲染出的結果不一樣，為了統一各家瀏覽器的預設渲染樣式，因此出了 CSS Reset 讓預設網頁樣式在各家瀏覽器是一樣的狀態。

網頁跟想像中的不一樣：先確認 CSS Reset 了沒

所以回到上述問題，以 chrome 瀏覽器為例，預設 body 的 margin 就設定 8px 了，所以如果沒有事先清除瀏覽器已經設定好的元素樣式，就會造成網頁排版跟想像中有落差。

我該如何使用 CSS Reset

這裡介紹目前最知名的兩個 CSS Reset 及其差異：

• meyerweb
  • 將所有瀏覽器預設樣式清除一乾二淨
  • 高度客製化可使用
• Normalize
  • 會保留一些網頁樣式，不會全部清除
  • Bootstrap 目前使用此 CSS Reset

以上 CSS Reset 都可以進去直接複製並貼到自己的樣式表。當然如果你夠熟，也可以自己設計一個 CSS Reset！

建立 CSS Reset 環境

進入 meyerweb 後，自然就會看到 CSS Reset 整串語法；至於 Normalize 則是在點擊 Download 按鈕後會進入它的 CSS 檔。

• 直接將整串複製下來，放到 CSS 檔案開頭
• 下載回來後獨立一支檔案，網頁由上到下讀取時，要先讀取 CSS Reset

從上述不論是哪一種方法，CSS Reset 必須先放在所有自行設定之 CSS 檔案前面，預設網頁檔案才會是清空的，否則可能會使效果不如預期，甚至是 CSS Reset 覆蓋了自行設定的樣式。