排版基礎

學會了標籤和樣式，接下來要學的是排版——決定東西「放在哪裡」。

div — 萬用容器

<div> 是最常用的容器標籤。它本身沒有外觀，但可以用來把東西包在一起，再統一設定樣式：

Box Model — 每個元素都是一個盒子

CSS 裡每個元素都是一個「盒子」，由內到外有四層：

padding — 內距

margin — 外距

border — 邊框

display: flex — 現代排版神器

傳統 HTML 的元素是「一行一個」往下排。display: flex 讓元素可以橫向排列：

flex 常用屬性

flex: 1 — 自動撐滿

組合技：三欄商品卡片

AI 協作：學了這個，跟 AI 怎麼配合？

排版是 CSS 最容易搞混的部分。跟 AI 溝通排版時，「畫面描述」比技術語言更有效。

你的人類優勢：

• 你能用白話描述想要的排版效果（「左邊 sidebar、右邊主內容」）
• 你能判斷 AI 排出來的版面是不是你要的

可以這樣跟 AI 說：

幫我做一個三欄商品列表，每欄一個商品卡片，卡片有圖片、名稱、價格，水平排列。

練習題