Vibe Coder
CSS 基礎：顏色、大小、間距搞定八成需求
CSS 基礎：顏色、大小、間距搞定八成需求
AI 給的 CSS 不一定完全符合你要的設計，選擇器用錯、間距不對，不懂 CSS 就只能每次重新描述給 AI 猜。
這篇帶你掌握選擇器、常用屬性、盒模型和 Flexbox 這幾個核心概念，換顏色、調間距這種小修改，你自己幾秒鐘就能完成，不需要開一個新的 AI 對話。
你將學到什麼
CSS 是怎麼運作的
選擇器加屬性的基本格式，一次看懂規則寫法。
選擇器與常用屬性
找到你要改的元素，記住最常用的顏色、間距、尺寸屬性。
盒模型：間距為什麼難搞
內容、內距、邊框、外距四層，理解了就不再亂猜。
Flexbox 排版
水平置中、兩端對齊，幾行 CSS 搞定排版。
CSS 是怎麼運作的
CSS 規則的基本格式很單純：選擇器加上一對大括號，裡面放「屬性冒號值」的成對敘述。
/* 選取所有 h1 標籤，設定顏色和大小 */
h1 {
color: #333333;
font-size: 32px;
font-weight: 800;
}
/* 選取 class 為 card 的元素 */
.card {
background: #ffffff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}選擇器：找到你要改的元素
| 選擇器 | 選取什麼 | 範例 |
|---|---|---|
| 標籤名 | 所有同類標籤 | p { color: #333; } 選所有段落 |
| 點加 class 名 | 有這個 class 的元素 | .btn { padding: 8px; } |
| 井字加 id 名 | 有這個 id 的元素（唯一） | #header { height: 60px; } |
| 父子（空格） | 父元素內所有子孫 | .card p { margin: 0; } |
| 元素加冒號 hover | 滑鼠移上去的狀態 | .btn:hover { background: red; } |
| 元素加冒號 first-child | 父元素的第一個子元素 | li:first-child { font-weight: bold; } |
最常用的 CSS 屬性
| 類別 | 屬性 | 常見值 |
|---|---|---|
| 文字 | color、font-size、font-weight、line-height、text-align | #333、16px、700、1.6、center |
| 背景 | background、background-color | #fff、transparent、漸層色 |
| 間距 | margin（外）、padding（內） | 8px、16px 24px、0 auto |
| 尺寸 | width、height、max-width、min-height | 100%、300px、auto |
| 邊框 | border、border-radius | 1px solid #ddd、8px |
| 顯示 | display | block、flex、grid、none、inline |
盒模型：為什麼間距這麼難搞
每個 HTML 元素都是一個盒子，由四層組成，由內到外分別是內容、內距、邊框、外距。
| 層次 | 說明 | CSS 屬性 |
|---|---|---|
| content | 實際的內容（文字、圖片） | width、height |
| padding | 內容和邊框之間的空白 | padding |
| border | 邊框線 | border |
| margin | 元素和其他元素之間的空白 | margin |
width 只算內容，加了內距和邊框後元素會變更寬。設定 box-sizing: border-box 讓寬度包含內距和邊框，更直覺。AI 生的 CSS 通常會在最頂端加這個設定。Flexbox：排版不再靠感覺
/* 水平排列，垂直置中 */
.navbar {
display: flex;
align-items: center; /* 垂直軸置中 */
justify-content: space-between; /* 兩端對齊 */
gap: 16px; /* 子元素之間的間距 */
}
/* 卡片垂直排列，滿版寬度 */
.card-list {
display: flex;
flex-direction: column;
gap: 12px;
}Tailwind CSS：原子化的 CSS 類別
Tailwind 把常用的 CSS 屬性縮短成類別，AI 生的前端很多用 Tailwind，看懂 class 名稱就能知道樣式。
| Tailwind 類別 | 等同的 CSS |
|---|---|
| text-xl | font-size: 1.25rem |
| font-bold | font-weight: 700 |
| text-red-500 | color: #ef4444 |
| p-4 | padding: 1rem（16px） |
| mt-2 | margin-top: 0.5rem（8px） |
| flex items-center gap-4 | display:flex、align-items:center、gap:1rem |
| rounded-lg | border-radius: 0.5rem（8px） |
| hidden | display: none |
| w-full | width: 100% |
練習：讀懂一個提示框的樣式
.alert-box {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 8px;
padding: 12px 16px;
color: #856404;
display: flex;
align-items: center;
gap: 8px;
}下次打開任何網站，試著用開發者工具的 Elements 面板找到主標題，在右側 Styles 面板直接修改顏色和字體大小，確認效果後再把這些值告訴 AI，讓它寫進正式的程式碼裡。
延伸學習
高效思維與腦內模擬：30 日練習與行動系統
每天一件事，三十天把「想到就做」換成「先在腦中跑一遍再動手」。六週依序練目標設定、腦內模擬、結果檢查、反饋與應變、知識萃取、總結與新目標，每天一課圖文，附可以直接填的練習表。週一給概念、週二實作、週三看案例、週四反思、週五收束，跟著節奏走就好，不必自己安排。
NT$ 1,599
HE101｜Harness Engineering Foundation（3 小時）
三小時的地圖課，不是操作課。把 Model 與 AI System 分開，拆解一套 AI Harness 的八個組成（Goal、Context、Knowledge、Rules、Tools、Workflow、Evaluation、Iteration），再帶你逆向拆解四個你已經在用的系統，最後畫出自己的第一張 Harness Blueprint。5 章 27 課，附學員講義 PDF 與術語速查表。
NT$ 2,599