CSS 的控制維度：畫面怎麼描述

學了 CSS，你就多了 11 個「控制點」來描述視覺效果。

「讓這個好看一點」「幫我排一下版」

完全沒有指定任何「視覺控制點」

「讓卡片置中，寬 300px，內距 16px，使用 flex 垂直排列，元素之間間距 8px」

你在描述一個具體的畫面結構，而不是一種「感覺」

你能控制的「視覺控制點」

每學會一個 CSS 概念，就多了一個可以在 Prompt 裡使用的視覺控制點。

維度
問題
Prompt 範例
位置（Position）
元素在哪裡？
「navbar 固定在頂部，position: fixed」
尺寸（Size）
多大？寬高多少？
「卡片寬 300px，高度自動」
間距（Spacing）
元素之間距離多少？
「卡片之間 gap: 16px，內距 padding: 24px」
排版（Layout）
怎麼排列？
「用 flex，水平排列，換行」
對齊（Alignment）
怎麼對齊？
「文字置中，按鈕靠右」
顯示（Display）
block/inline/flex/grid？
「產品網格用 grid，3 欄」
可見性（Visibility）
顯示還是隱藏？
「手機版隱藏側邊欄」
層級（Layer）
誰在上面？
「modal 的 z-index 要比 navbar 高」
樣式（Style）
顏色、字體、背景？
「背景 #f5f5f5，標題用 24px 粗體」
響應式（Responsive）
不同螢幕怎麼變？
「768px 以下改成單欄排列」
狀態（State）
hover/active/focus 時？
「hover 時背景變深，加 transition 0.2s」

Prompt 改造練習

點擊每個「不好的 Prompt」，看看加上 CSS 控制維度後會變成什麼樣子。

🎨

學了 CSS，你就多了 11 個「控制點」來描述視覺效果。不再說「好看一點」，而是精確告訴 AI 每個屬性要什麼值。

下一課