取得報價 立即詢價
BLOG
網站專欄 Q & A
目前分類：網站技術 ▼
網站技術

CSS 入門教學：盒模型到 RWD 響應式全攻略

CSS 入門教學：盒模型到 RWD 響應式全攻略

CSS（Cascading Style Sheets，階層式樣式表）是負責網頁外觀的核心技術，從字體顏色到版面排版，全由它掌控。您是否曾花了幾小時寫好 HTML，打開瀏覽器卻像一份純文字文件，毫無美感？用手機一開，版面整個跑掉？別擔心，您只是還沒幫網頁「穿上衣服」。本文延續「邊做邊學」原則，每一章都附上可直接複製、存檔就能執行的完整範例，從語法基礎到響應式設計，帶您一次打通前端開發最關鍵的地基。

本篇目錄

最快的 CSS 學習路線圖與方法

如果您已經會寫基本的 HTML，照著本文的章節順序走，總時數約 6～10 小時就能獨立完成一個會自動適應手機的響應式版面。還不熟悉網頁結構的讀者，建議先閱讀 HTML 入門教學打好地基再回來。以下是建議的學習路線與時間配置：

階段 對應章節 學習重點 建議時間
第 1 步 CSS 是什麼 CSS 語法三要素、三種套用方式 1 小時
第 2 步 盒模型 盒模型，所有排版問題的根源 1.5 小時
第 3 步 CSS 選擇器 選擇器與權重，CSS 沒反應的解答 1.5 小時
第 4 步 Flexbox 與 Grid Flexbox 與 Grid 現代排版 2～3 小時
第 5 步 RWD 響應式設計 媒體查詢與斷點，完成手機版面 1.5 小時
驗收 視覺階層與美學 視覺階層與留白，完成質感版面 1 小時
學習方法：與學 HTML 時相同，不要用看的，要用做的。每個範例都複製下來、存檔、開瀏覽器，再動手改數值觀察畫面變化。CSS 尤其適合「改壞它」：把 padding 改成 100px、把 flex 拿掉，親眼看版面怎麼崩壞，是理解排版最快的方式。

CSS 是什麼？網頁外觀設計的幕後推手

CSS 是控制網頁視覺呈現的語言，沒有它，網站就只是一堆黑白文字加預設藍色連結。如果把製作網頁比喻成蓋房子，HTML 是鋼筋水泥（結構），而 CSS 就是裝潢與油漆（樣式）。CSS 負責控制字體大小、顏色、背景，以及最讓新手頭痛的「排版位置」。

CSS 語法的黃金三要素

要寫出第一行 CSS，只需記住三個核心概念：

  • 選擇器（Selector）：指定要改變哪個元素。例如 h1 代表「所有大標題」。
  • 屬性（Property）：指定要改變什麼特性。例如 color 代表「文字顏色」。
  • 值（Value）：指定要改成什麼效果。例如 red 代表「紅色」。
CSS 
/* 範例：讓所有 h1 標題變成紅色 */
h1 {
    color: red;
}

這聽起來很簡單，但這正是前端開發入門必經的第一個門檻。弄懂了這個邏輯，您就擁有了開啟網頁設計無限可能的鑰匙。

CSS 的三種套用方式

方式 寫法 適用情境
外部樣式表（External） 用 <link> 引入獨立的 .css 檔案 最推薦。方便維護與跨頁重複使用，正式網站的標準做法
內部樣式（Internal） 寫在 HTML <head> 內的 <style> 標籤 單頁文件或練習範例，本文的範例都採用此方式方便複製
行內樣式（Inline） 直接寫在標籤的 style 屬性 優先度最高但最難維護，非必要應避免

完整範例：您的第一個 CSS 網頁

操作步驟：複製以下全部程式碼，存檔為 css-first.html，用瀏覽器打開，就能看到 CSS 幫網頁「穿上衣服」的效果。試著把 crimson 改成 royalblue，存檔重新整理，感受即改即見的樂趣。

HTML + 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>我的第一個 CSS 網頁</title>
    <style>
        body {
            font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
            line-height: 1.6;
            color: #333333;
        }
        h1 {
            color: crimson;              /* 標題變紅 */
        }
        p {
            font-size: 18px;             /* 內文字級 */
            background: #fdf4f4;         /* 淡紅背景 */
            padding: 12px;               /* 內距留白 */
        }
    </style>
</head>
<body>
    <h1>CSS 讓網頁活起來</h1>
    <p>同一份 HTML，加上 CSS 之後就有了顏色、字體與留白。</p>
</body>
</html>

掌握 CSS 核心地基：盒模型（Box Model）

在 CSS 的世界裡，請永遠記住：所有 HTML 元素都是一個盒子。無論是標題、圖片還是段落，瀏覽器都會把它們視為一個個長方形的盒子，這就是所謂的 CSS 盒模型（Box Model）。不懂這個概念，網頁排版保證亂七八糟。

盒子的四層結構

想像您在打包一個包裹，這個盒子由內而外包含四個部分：

  • 內容（Content）：盒子裡真正的物品，例如文字或圖片。用 width 與 height 控制尺寸。
  • 內距（Padding）：物品與箱子邊緣的緩衝氣泡紙（內部留白）。背景色會延伸到此區域。
  • 邊框（Border）：箱子的厚紙板外殼（線條）。可設定寬度、樣式與顏色。
  • 外距（Margin）：箱子與其他箱子之間的距離（外部留白）。背景色不延伸到此。

新手最容易踩的「尺寸陷阱」

這是連資深工程師在新手時期都曾崩潰過的問題：假設您設定一個盒子 width: 200px，再加上 padding: 20px 與 border: 5px，直覺會認為這個盒子寬度還是 200px，對吧？

注意：在預設情況下，瀏覽器會把 padding 與 border 往外加疊。最終寬度 = 200 + 20×2（左右內距）+ 5×2（左右邊框）= 250px。這多出來的 50px，往往就是導致側邊欄掉下來、版面破版的元兇。

一行程式碼解決尺寸計算問題

為了避免這種數學災難，現代網頁開發者通常會在 CSS 最開頭加上這段程式碼：

CSS 
/* 讓寬度包含 padding 與 border，不再自動膨脹 */
* {
    box-sizing: border-box;
}

加上這行後，設定 width: 200px，瀏覽器就會自動扣除內距與邊框，確保盒子總寬度鎖死在 200px。這是寫 CSS 的第一條軍規。

完整範例：親眼看出兩種盒子的差異

複製存檔為 box-model.html，兩個盒子設定的 width 都是 200px，但實際佔的寬度完全不同：

HTML + 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>盒模型實驗</title>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            border: 5px solid crimson;
            margin-bottom: 16px;
            background: #fdf4f4;
        }
        .default-box {
            box-sizing: content-box;   /* 預設：實際寬 250px */
        }
        .modern-box {
            box-sizing: border-box;    /* 現代：實際寬 200px */
        }
    </style>
</head>
<body>
    <div class="box default-box">我是預設盒子，實際寬度會膨脹到 250px</div>
    <div class="box modern-box">我是 border-box 盒子，寬度鎖死 200px</div>
</body>
</html>
練習：用瀏覽器打開後按 F12，在 Elements 面板分別點選兩個盒子，觀察右下角的 Box Model 圖示，親眼確認 content、padding、border 的實際像素。這個工具是日後排版除錯的最佳夥伴。

精準控制樣式：必學的 CSS 選擇器

CSS 選擇器的功能就像是點名，您必須精確告訴瀏覽器「我要改變這個，不要動那個」。雖然 CSS 有幾十種選擇器，但實戰中 90% 的時間只用到三種。

三大基礎選擇器

選擇器 語法範例 效果與適用
標籤選擇器（Type） p { color: blue; } 網頁裡「所有的」段落都變藍色。範圍最大，但也最粗糙
類別選擇器（Class） .highlight { background: yellow; } 只有寫了 class="highlight" 的元素才會變黃，可靈活重複使用。最推薦
ID 選擇器（ID） #logo { width: 100px; } 只影響 id="logo" 的那一個元素。每個頁面每個 ID 只能出現一次

為什麼 CSS 沒反應？權重戰爭

明明寫了 color: red，文字還是黑的，通常是因為「權重（Specificity）」問題。瀏覽器在決定樣式時，有嚴格的計分標準：

  • ID 選擇器：100 分（權力最大）
  • Class 選擇器：10 分
  • 標籤選擇器：1 分
CSS 
/* 標籤選擇器 (1 分) */
p { color: blue; }

/* Class 選擇器 (10 分) — 勝出！文字會是紅色 */
.text-red { color: red; }
實戰建議：盡量多用 Class（10 分）來寫樣式。ID（100 分）權重太重，一旦用了就很難覆蓋；標籤（1 分）範圍太廣，容易誤傷無辜。保持權重均衡，CSS 才會好維護。

完整範例：三種選擇器與權重對決

複製存檔為 selectors.html，觀察同一個段落被三種選擇器搶奪時，誰會勝出：

HTML + 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>選擇器與權重實驗</title>
    <style>
        /* 標籤選擇器：1 分 */
        p { color: blue; }

        /* Class 選擇器：10 分，蓋過標籤 */
        .warning { color: orange; }

        /* ID 選擇器：100 分，蓋過 Class */
        #important { color: crimson; }
    </style>
</head>
<body>
    <p>我只被標籤選擇器選中，所以是藍色。</p>
    <p class="warning">我有 class，10 分蓋過 1 分，所以是橘色。</p>
    <p class="warning" id="important">我同時有 class 和 id，100 分最大，所以是紅色。</p>
</body>
</html>

告別傳統排版：Flexbox 與 Grid 網格系統

現代 CSS 提供了 Flexbox 與 Grid 兩大排版神器，徹底取代了過去用 float 硬湊版面的惡夢。兩個都要學，因為它們是互補的。

Flexbox：一維排版的救星

Flexbox 彈性排版是專為「單一軸線」（橫向或縱向）設計的佈局模式，最強大的功能在於「對齊」與「空間分配」。

CSS 
.container {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
}

Flexbox 非常適合用來製作導覽列（Navbar）、按鈕群組，或是卡片式的並排清單。

Grid：二維排版的霸主

如果需要同時處理「行」與「列」，打造像雜誌一樣複雜的版型，CSS Grid 就是最佳選擇。Grid 讓您能在容器上直接畫出隱形的網格線，然後指定元素要佔據哪幾個格子，不需要巢狀包覆一堆 div。

Flexbox 與 Grid 怎麼選？

比較項目 Flexbox（彈性盒） Grid（網格）
維度 一維（1D）：處理單行或單列 二維（2D）：同時處理行與列
核心邏輯 內容優先：依照內容大小推擠空間 佈局優先：先畫好格子，再把內容塞進去
最強功能 元素的對齊、分配剩餘空間 精準控制版面結構、重疊元素
典型場景 選單、置中、工具列、卡片列 整個網站骨架、相簿牆、雜誌版型

完整範例：Flexbox 導覽列與 Grid 相簿牆

複製存檔為 flex-grid.html，一頁同時體驗兩種排版：上方是 Flexbox 導覽列，下方是 Grid 三欄卡片牆。試著把 grid-template-columns 的 3 改成 2 或 4，觀察格子如何重排：

HTML + 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>Flexbox 與 Grid 實驗</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: "Microsoft JhengHei", sans-serif; margin: 0; }

        /* Flexbox：導覽列（一維：橫向一排） */
        .navbar {
            display: flex;
            justify-content: space-between; /* 左右分開 */
            align-items: center;            /* 垂直置中 */
            background: #a3474c;
            color: #fff;
            padding: 12px 20px;
        }
        .navbar ul {
            display: flex;                  /* 選單項目也用 flex 並排 */
            gap: 20px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* Grid：卡片牆（二維：行與列同時控制） */
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 三等分欄位 */
            gap: 16px;
            padding: 20px;
        }
        .card {
            background: #fbf5f5;
            border: 1px solid #ead4d5;
            border-radius: 8px;
            padding: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <strong>我的網站</strong>
        <ul>
            <li>首頁</li>
            <li>作品</li>
            <li>聯絡</li>
        </ul>
    </nav>

    <div class="gallery">
        <div class="card">卡片 1</div>
        <div class="card">卡片 2</div>
        <div class="card">卡片 3</div>
        <div class="card">卡片 4</div>
        <div class="card">卡片 5</div>
        <div class="card">卡片 6</div>
    </div>
</body>
</html>

RWD 響應式網頁設計：讓網站在手機上也完美呈現

行動裝置已貢獻超過六成的網路流量，RWD 響應式設計是基本配備，不是加分項目。行動友善程度同時是搜尋引擎評估網頁品質的門檻之一，做好 RWD 既是使用者體驗，也是 SEO 優化的基本功。對台灣中小企業來說，官網流量有七成以上來自手機的情形相當常見，手機版破版等同於直接流失詢價。

關鍵第一步：Viewport 設定

在 HTML 的 <head> 裡加上這行「通關密語」：

HTML 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

這告訴手機瀏覽器：「請用螢幕的實際寬度來渲染網頁，不要把電腦版的畫面硬塞進來縮小。」

核心語法：媒體查詢（Media Queries）

CSS 透過 @media 偵測裝置條件：

CSS 
/* 預設樣式（手機優先 Mobile First） */
body {
    font-size: 16px;
    background: white;
}

/* 當螢幕寬度「至少」有 768px 時（平板以上） */
@media (min-width: 768px) {
    body {
        font-size: 18px;       /* 字變大 */
        background: #f0f0f0;   /* 背景變灰 */
    }
}

斷點該怎麼切？

千萬不要為「特定手機型號」寫樣式（例如某支手機的 320px）。只需關注以下三個通用斷點，並記住原則：內容優先（Content First）。

  • 768px：平板直立與大手機的分界。
  • 1024px：平板橫放與小筆電的分界。
  • 1200px：標準桌機螢幕。

完整範例：會自己變身的響應式卡片

複製存檔為 rwd.html，用瀏覽器打開後拖曳視窗寬度：視窗窄時卡片直向堆疊（手機版），拉寬超過 768px 時自動變成三欄並排（桌機版）：

HTML + 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>RWD 響應式實驗</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: "Microsoft JhengHei", sans-serif; margin: 0; padding: 20px; }

        /* 手機優先：預設一欄直向堆疊 */
        .cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .card {
            background: #fbf5f5;
            border: 1px solid #ead4d5;
            border-radius: 8px;
            padding: 24px;
        }

        /* 平板以上：變成三欄並排 */
        @media (min-width: 768px) {
            .cards {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <h1>拖曳視窗寬度看看我</h1>
    <div class="cards">
        <div class="card">手機上我在第一排</div>
        <div class="card">拉寬視窗我們就並排</div>
        <div class="card">這就是 RWD 的魔法</div>
    </div>
</body>
</html>

提升使用者體驗：網頁視覺階層與美學

學會排版技術後，最後一哩路是美感：利用 CSS 引導讀者的眼睛，讓他們第一眼就能看到最重要的資訊。在 AI 搜尋時代，ChatGPT、Perplexity 與 Google AI Overviews 會直接摘要內容，版面清晰、結構分明的頁面更容易被正確解讀與引用。

建立視覺階層的三個手段

  • 大小（Size）：最重要的東西越大。H1 標題通常是內文的 2 倍以上。
  • 顏色（Color）：利用對比色突顯重點。例如鮮豔的 CTA 按鈕。
  • 位置（Position）：遵循 F 型閱讀動線，將關鍵訊息放在左上方。

留白（White Space）的藝術

留白不是浪費空間，而是讓內容呼吸。適當地增加 margin（外距）與 padding（內距），給予元素周圍至少 16px 到 24px 的呼吸空間，可以大幅提升閱讀舒適度。

字體與對比（Typography & Contrast）

  • 字體顏色：避免使用純黑（#000000），改用深灰（#333333）讓閱讀更柔和。
  • 行高（Line-height）：設定 line-height: 1.6 以上是黃金標準，避免文字擠在一起。
  • 字體堆疊：中文網站建議使用 font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif。

完整範例：把美學原則一次套上

複製存檔為 visual.html，這一頁集合了視覺階層、留白、字體與對比的所有原則，可直接當作日後版面設計的起手式：

HTML + 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>視覺階層與美學範本</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
            color: #333333;            /* 深灰取代純黑 */
            line-height: 1.6;          /* 行高黃金標準 */
            max-width: 680px;
            margin: 0 auto;            /* 版面置中 */
            padding: 40px 24px;        /* 充足留白 */
        }
        h1 {
            font-size: 2.2em;          /* 大小：標題是內文 2 倍以上 */
            margin-bottom: 8px;
        }
        .subtitle {
            color: #777;
            margin-bottom: 32px;       /* 區塊間留白 */
        }
        .cta {
            display: inline-block;
            background: #a3474c;       /* 顏色：對比色突顯重點 */
            color: #fff;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>視覺有層次，重點自己說話</h1>
    <p class="subtitle">大小、顏色、位置，三個手段引導讀者的眼睛。</p>
    <p>內文使用深灰色與 1.6 倍行高，長時間閱讀也不疲勞。
       段落之間保留足夠的留白，讓內容能夠呼吸。</p>
    <a class="cta" href="#">立即行動按鈕</a>
</body>
</html>
下一步：HTML 打好結構、CSS 完成外觀之後，網頁開發鐵三角只剩最後一塊：負責互動功能的 JavaScript 語法教學，學會它就能做出輪播圖、表單驗證等動態效果。

CSS 常用屬性速查總表

CSS 屬性數量龐大，但以下依用途分類的常用屬性，已涵蓋實務絕大多數的使用場景。建議把這張表存起來，寫樣式時當字典查：記不住屬性沒關係，知道去哪裡查才重要。

文字與字體

屬性 用途說明 常用值範例
color 文字顏色 #333333、crimson
font-size 字體大小 16px、1.2rem
font-family 字體堆疊，由左至右依序套用 "Microsoft JhengHei", sans-serif
font-weight 字體粗細 400（正常）、700（粗體）
line-height 行高，1.6 以上為閱讀黃金標準 1.6、1.8
text-align 文字水平對齊 left、center、right
text-decoration 文字裝飾線，常用於移除連結底線 none、underline
letter-spacing 字元間距，中文標題適度加寬更有質感 1px、0.05em

盒模型與邊框

屬性 用途說明 常用值範例
width／height 內容區寬度與高度 200px、100%
max-width 最大寬度，RWD 版面常用 1100px、100%
padding 內距（內容與邊框之間的留白） 20px、12px 16px
margin 外距（元素之間的距離） 16px 0、0 auto（水平置中）
border 邊框：粗細加樣式加顏色 1px solid #ead4d5
border-radius 圓角，50% 可做出正圓形 8px、50%
box-sizing 尺寸計算方式，第一條軍規 border-box
box-shadow 盒子陰影，增加立體感 0 2px 8px rgba(0,0,0,0.1)

背景

屬性 用途說明 常用值範例
background-color 背景顏色，延伸至 padding 區域 #fbf5f5
background-image 背景圖片或漸層 url("bg.jpg")、linear-gradient(...)
background-size 背景圖縮放方式 cover（鋪滿）、contain（完整顯示）
background-position 背景圖對齊位置 center、top right
background-repeat 背景圖是否重複拼貼 no-repeat

排版與定位

屬性 用途說明 常用值範例
display 元素的顯示模式，排版的總開關 block、inline-block、flex、grid、none
position 定位方式 relative、absolute、fixed、sticky
top／right／bottom／left 搭配 position 使用的偏移量 0、20px
z-index 堆疊順序，數字越大越上層 1、999
overflow 內容超出容器時的處理方式 hidden、auto、scroll

Flexbox 彈性排版

屬性 用途說明 常用值範例
display: flex 啟用彈性排版（寫在容器上） flex
justify-content 主軸（水平）對齊與空間分配 center、space-between
align-items 交錯軸（垂直）對齊 center、flex-start
flex-direction 主軸方向：橫排或直排 row、column
flex-wrap 空間不足時是否換行 wrap、nowrap
gap 項目之間的間距（Flex 與 Grid 通用） 16px、12px 20px
flex 項目的伸縮比例（寫在子元素上） 1（平均分配）

Grid 網格排版

屬性 用途說明 常用值範例
display: grid 啟用網格排版（寫在容器上） grid
grid-template-columns 定義欄位數量與寬度 repeat(3, 1fr)、200px 1fr
grid-template-rows 定義列的數量與高度 auto 1fr auto
grid-column 指定元素橫跨哪些欄 1 / 3（跨兩欄）
grid-row 指定元素橫跨哪些列 1 / 2

RWD、動效與互動

屬性或語法 用途說明 常用值範例
@media 媒體查詢，RWD 的核心語法 @media (min-width: 768px) { ... }
transition 屬性變化的過渡動畫 all 0.3s ease
transform 位移、縮放、旋轉元素 translateY(-2px)、scale(1.05)
opacity 透明度，0 為全透明、1 為不透明 0.8
cursor 滑鼠游標樣式 pointer（手指）
:hover 偽類：滑鼠移入時的樣式 .btn:hover { background: #cf9296; }
速查表使用建議：新手先熟練「文字字體、盒模型、Flexbox」三類，就足以完成大部分日常版面；Grid 與動效屬性等實際需要時再查即可。查詢屬性的完整規格，直接搜尋「MDN 加屬性名稱」就能找到權威說明。

常見問答 FAQ

CSS 與 JavaScript 有什麼不同？
CSS 負責外觀樣式，JavaScript 負責互動功能，兩者分工完全不同。如果把網頁比喻為一棟房子，HTML 是結構樑柱，CSS 是裝潢油漆與燈光設計，JavaScript 則是水電與智慧家電，負責計算與互動。實際範例：按鈕的顏色、圓角、陰影由 CSS 決定；點擊按鈕後跳出視窗、送出表單、載入新資料，則是 JavaScript 的工作。學習順序上建議先把 HTML 與 CSS 練熟，能獨立完成靜態版面後再進入 JavaScript 的邏輯世界，銜接會順暢許多，也比較能分辨問題出在樣式還是程式。
CSS 樣式為什麼會被覆蓋？
通常是「權重不足」或「載入順序」造成的。瀏覽器決定樣式時有兩條規則：第一，權重高者優先，ID 選擇器的分數高於 Class，Class 又高於標籤選擇器，權重高的規則會蓋過權重低的；第二，權重相同時後寫者優先，寫在下方或較晚載入的樣式會覆蓋上方的。遇到樣式不生效時，先按 F12 開啟瀏覽器開發者工具，在 Styles 面板查看該元素套用了哪些規則，被劃掉的就是被覆蓋的樣式，往上找出是哪條規則勝出，再決定要提高自己的權重還是調整載入順序即可。
初學者該先學 Tailwind 還是原生 CSS？
強烈建議先學好原生 CSS。Tailwind 的本質是把常用的 CSS 屬性封裝成短類別名稱，寫起來雖然快，但如果不懂 display: flex 的對齊邏輯或 box-sizing: border-box 的尺寸計算原理，遇到破版時根本不知道問題出在哪，只能盲目嘗試。原生 CSS 練到能獨立完成一個響應式版面後，再導入 Tailwind 這類工具，就會發現它只是加速器而不是黑盒子，除錯與客製化都能游刃有餘。先把地基打好，對職涯的長期幫助最大，框架與工具則隨時可以再學。
網頁設計單位該用 px、em 還是 rem？
現代網頁建議優先使用 rem，搭配少量 px，盡量避免 em。rem 是相對於根元素的單位，根元素字體通常預設為 16px，因此 1rem 等於 16px；當使用者在瀏覽器調大預設字體時，所有以 rem 定義的尺寸會等比例放大，對無障礙設計（Accessibility）更友善。em 則相對於父元素，巢狀結構下容易層層相乘、越算越亂，維護成本較高。px 是絕對單位，適合用在邊框粗細、陰影這類不需要縮放的細微效果。實務原則：字體與間距用 rem，邊框與裝飾細節用 px。
寫完 CSS 版面還是跑掉，該怎麼檢查？
第一步永遠是按 F12 開啟瀏覽器開發者工具（DevTools）。在 Elements 面板點選跑掉的元素，右側 Styles 面板會列出所有套用中的規則，被劃掉的代表已被其他規則覆蓋；再利用面板中的 Box Model 圖示，查看該元素的 padding、border、margin 實際像素大小，多數破版都是盒模型尺寸超出預期造成的。另外建議檢查樣式表開頭是否已加上 box-sizing: border-box，手機破版時則確認 head 內是否有 viewport 設定。養成用工具查證證據而不是盲目改數值的習慣，除錯速度會快上很多。
延伸學習資源：MDN Web Docs：CSS、W3Schools CSS Tutorial

歡迎推廣本文，請務必連結(LINK)本文出處：新視野網頁設計公司

分類列表(網站技術) 全部列表
立即詢價
方案諮詢
方案諮詢

30分鐘內立即為您服務。