在開發內容型網站或前端專案時，如果不想像傳統 Reset 那樣把 h1 ～ h6 標題粗體與段落間距全部清空，最主流的做法就是引入 Normalize.css。它能保留合理的瀏覽器預設排版，同時精準修復 Chrome、Safari、Firefox 與 Edge 之間的渲染差異。
快速複製與章節跳轉：
⚡ 直接複製 HTML CDNlink標籤 ➔ 方式一：透過 CDN 直接在 HTML 引入
⚡ 直接複製 Vite / Webpack 安裝指令 ➔ 方式二：透過 NPM 安裝與 import
🔍 想看它到底修了哪些瀏覽器預設樣式？ ➔ 2. Normalize.css 底層到底幫我們修了哪些瀏覽器差異？
🧭 猶豫該用 Normalize.css 還是 CSS Reset？ ➔ 參閱 CSS Reset / Normalize.css 樣式初始化 – 差異比較與新專案怎麼選
1. Normalize.css 的 3 種引入與安裝方式
載入順序關鍵提醒：由於 CSS 具有「選擇器權重相同時，後寫覆蓋前寫」的層疊特性，
normalize.css必須永遠放在你所有自訂 CSS 檔案的最前面。如果放在自訂樣式後面，會導致你設定的body或標題樣式被重新覆蓋（關於選擇器與載入順序，可參考 CSS 權重與優先順序：!important、ID 與 Class 選擇器比較）。
方式一：透過 CDN 直接在 HTML 引入（最快、適合靜態頁面）
如果是純 HTML 專案或快速原型開發，直接複製下方 cdnjs 的最新穩定版（v8.0.1）link 標籤，貼在 head 區塊內自訂 style.css 的上方：
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Normalize.css 引入範例</title>
<!-- 1. 務必先載入 Normalize.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- 2. 接著才載入你自己的專案樣式表 -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>標題會保留預設粗體與合理字級</h1>
<p>頁面四周的預設 8px 白邊已被自動清除。</p>
</body>
</html>方式二：透過 NPM 安裝（適合 Vite / Webpack / React / Vue 專案）
在現代前端建置工具中，建議直接透過 NPM 安裝官方套件：
npm install --save normalize.css安裝完成後，在專案的全域入口檔（例如 src/main.js 或 src/main.ts）的最頂端引入：
// 1. 先引入 normalize.css
import 'normalize.css';
// 2. 後引入專案全域樣式
import './assets/main.css';方式三：下載獨立 CSS 檔案至本地專案
若專案環境不允許連線外部 CDN，也可直接前往 Normalize.css 官方檔案頁面 將原始碼另存為 normalize.css 放入專案目錄中，再透過相對路徑載入。
2. Normalize.css 底層到底幫我們修了哪些瀏覽器差異？
許多工程師引入了 normalize.css 卻不清楚它裡面寫了什麼。事實上，它的原始碼只有約 350 行（含詳細註解），核心修正了以下 5 大跨瀏覽器預設樣式痛點：
| 修復類別 | 瀏覽器原生預設問題 | Normalize.css 的修正規則 |
|---|---|---|
| 1. 消除頁面四周白邊 | 各大瀏覽器預設為 body 加上 margin: 8px，導致滿版背景出現白框 | body { margin: 0; } |
| 2. 統一字體縮放與行高 | iOS Safari 橫向旋轉時會自動放大文字，且各瀏覽器預設行高計算不一 | html { line-height: 1.15; -webkit-text-size-adjust: 100%; } |
| 3. 防止上下標撐亂段落行高 | 在文章中使用 sub（下標）或 sup（上標）時，會把該行文字的垂直行距撐開 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } |
| 4. 統一表單元件字型與邊距 | button、input、select 預設不繼承字體大小，且 Firefox / Safari 預設帶有外距 | button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } |
| 5. 修正 Safari 按鈕與搜尋框外觀 | iOS / Safari 的可點擊按鈕類型（button、type="submit" 等）套用原生外觀而難以自訂樣式；Chrome 與 Safari 的 type="search" 外觀與外框樣式也不一致 | 按鈕類設定 -webkit-appearance: button;；[type="search"] 設定 -webkit-appearance: textfield; 與 outline-offset: -2px; |
3. 引入 Normalize.css 後必補的 2 段實務設定
由於 normalize.css 的設計原則是「只修正瀏覽器不一致，不主動改變標準預設行為」，因此它沒有幫你把盒模型改為 border-box，也沒有清除清單圓點。
實務開發中，建議在引入 normalize.css 之後，於自己的 style.css 開頭補上以下設定（若你希望直接連標題與清單外距都徹底歸零，則可改用 CSS Reset 樣式初始化：Eric Meyer Reset 與 Modern CSS Reset 程式碼範本）：
/* 1. 補上全域 border-box，避免 padding 與 border 撐大區塊寬度造成破版 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. 補上圖片響應式限制，避免大圖超出容器寬度 */
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}（若想深入了解為什麼 border-box 能防止加上內距後破版，可延伸參考 CSS box-sizing 用法：border-box 與 content-box 寬高計算差別。）
參考資料與延伸閱讀
- Normalize.css Official Website
- GitHub: necolas/normalize.css Source Code
- cdnjs: normalize.css v8.0.1
- GitHub: necolas/normalize.css README（NPM 安裝方式）
- WHATWG HTML Standard: Rendering（
body預設margin: 8px） - CSS Reset / Normalize.css 樣式初始化 – 差異比較與新專案怎麼選
- CSS 權重計算規則：!important、ID 與 Class 優先順序與 Cascading 層疊邏輯
發佈留言