---
# System prepended metadata

title: 刻板必備：排版 × 定位 × 屬性對照指南
tags: [CSS]

---

# 刻板必備：排版 × 定位 × 屬性對照指南

## 📖 一、排版概念說明：什麼是排版？什麼是骨架？

切版的本質就是：**安排每個實體區塊在頁面上的位置與分布。**

你會遇到這些排法：
- 區塊**上下排列**（header 在上，footer 在下）
- 區塊**左右排列**（圖片在左，文字在右）
- 元素**中間置中**（用 `margin: 0 auto`）
- 容器**撐滿寬度**（用 `width: 100%`）
- 用 `flex` 或 `grid` 進行**分欄排列**
- 用 `position` 把元素**貼邊固定在畫面上**

👉 所以，**你要控制的其實是容器怎麼排內容、內容怎麼彼此互動**。



### 🧱 排版行為三層結構

| 層級 | 對象範例 | 排什麼 |
|------|------------------|-----------------------------|
| 全頁骨架 | `.page-wrapper`, `body` | `header` / `main` / `footer` 等區塊的上下結構 |
| 區塊骨架 | `.container`, `.card` | 區塊內的左右欄、上下段落 |
| 區塊內容 | `.title`, `.text`, `.button` 等 | 單一區塊內的細節排法 |

---

### 🔍 那麼……你要用什麼語法來控制這些「排法」？

雖然我們通通把它叫做「排版」，但實際上，CSS 中控制排版行為的語法可以分成三種不同的角色：

1. **排版屬性**：直接定義「我要怎麼排」
2. **定位屬性**：「我不要參與排列，我要自己去某個點」
3. **負空間屬性**：「我不動位置，只想靠近一點」

---

### 📌 排版屬性 vs 定位屬性 vs 負空間屬性

| 分類 | 說明 | 常見屬性 |
|------|------|------------|
| 排版屬性 | 控制容器的排列方式與子元素的參與關係 | `display`, `flex-direction`, `grid-template-columns` 等 |
| 定位屬性 | 跳脫原有排列、自由決定元素位置 | `position`, `top`, `left`, `right`, `z-index` 等 |
| 負空間屬性 | 控制元素內外的間距（不改變排列邏輯）| `margin`, `padding` 等 |

📘 **簡單記法**  
> 排版是「**參與排列**」，定位是「**跳脫排列**」，負空間則是「**調整邊界**」。

---

## 🧭 二、📘排版屬性 × 📍定位屬性 × 🔳負空間屬性 ｜ 使用補強篇

本章將針對實務中最常見的「排版控制語法」進行補充與使用時機說明，並依據其**語法功能**與**使用位置**，分為以下三類：

- 🧱 排版屬性（設定容器的排列方式與子元素的行為）
- 📍 定位屬性（決定元素是否脫離排版流）
- 🔳 負空間屬性（調整元素與邊界之間的距離）

---

### 🧱 排版屬性區塊（設定容器的排列方式與排版邏輯）

#### ✨ `display`（顯示模式）

📌 不需搭配其他屬性即可生效，但會影響許多屬性的可用性（如 `justify-content`、`flex-wrap` 依賴它）

| 值 | 中文語感翻譯 | 排列方式 | 行為說明 |
|----|----------------|------------|-----------------------------|
| `block ★` | 占整行 | 上下排列 | 預設區塊元素，如 div、p 等 |
| `inline` | 與文字同行 | 同行排列 | 不會換行，無法設定寬高 |
| `inline-block` | 可設寬高的行內元素 | 同行排列 | 不會換行，但可以設定寬高 |
| `flex ★` | 彈性排版 | 排子元素 | 啟用 Flex 排版模式 |
| `inline-flex` | 行內彈性排版 | 同行 + Flex | 像 inline，但內部使用 flex 排列 |
| `grid ★` | 格線排版 | 排子元素 | 啟用 Grid 排版模式 |
| `inline-grid` | 行內格線排版 | 同行 + Grid | 像 inline，但內部使用 grid 排列 |
| `contents` | 僅保留子元素 | 無自身外框 | 自己不佔位，僅保留子元素（slot-like 用途） |
| `none ★` | 不顯示 | 不參與排版 | 元素從畫面中消失，與 visibility 不同 |


📘 補充說明：
- `display` 是 CSS 中最核心的排版屬性之一，控制元素的參與排列方式。
- 常見容器如 `.container`、`.section`、`.card` 等，會設為 `flex` 或 `grid`。
- `inline-*` 系列保留原本行內特性，但加上排列能力。

---

#### ✨ `flex-direction`（主軸方向）

📌 **需搭配 `display: flex` 或 `inline-flex`** 才會生效

| 值              | 中文語感翻譯    | 主軸方向 | 行為說明               |
|-----------------|-----------------|----------|------------------------|
| `row` ★         | 橫向（預設）    | 左 → 右   | 子元素橫向排列         |
| `row-reverse`   | 橫向反排        | 右 → 左   | 子元素從右排到左       |
| `column`        | 直向排列        | 上 → 下   | 子元素上下排列         |
| `column-reverse`| 直向反排        | 下 → 上   | 子元素從下排到上       |

---

#### ✨ `justify-content`（主軸對齊方式）

📌 **需搭配 `display: flex` 或 `grid`** 才會生效

| 值               | 中文語感翻譯     | 對齊方向（主軸） | 行為說明                     |
|------------------|------------------|------------------|------------------------------|
| `flex-start`     | 靠起點對齊       | 左 / 上           | 貼齊主軸起點排列             |
| `center` ★       | 置中             | 中央              | 所有子元素集中在中間         |
| `flex-end`       | 靠終點對齊       | 右 / 下           | 貼齊主軸尾端排列             |
| `space-between` ★| 兩端對齊         | 首尾貼齊          | 元素間平均分配               |
| `space-around`   | 各留空隙         | 間距對稱          | 每側留空一半空隙             |
| `space-evenly`   | 完全平均分布     | 間距對稱          | 所有元素間距完全相同         |

---

#### ✨ `align-items`（交錯軸對齊方式）

📌 **需搭配 `display: flex` 或 `grid`** 才會生效

| 值          | 中文語感翻譯         | 對齊方向（交錯軸） | 行為說明                    |
|-------------|----------------------|---------------------|-----------------------------|
| `stretch` ★ | 撐滿交錯軸（預設）   | 拉開對齊            | 元素高度（或寬度）一致撐滿 |
| `flex-start`| 靠上對齊             | 起點對齊            | 對齊交錯軸起點              |
| `center`    | 垂直置中             | 垂直中線對齊        | 元素居中                    |
| `flex-end`  | 靠下對齊             | 終點對齊            | 對齊交錯軸終點              |
| `baseline`  | 對齊文字基線         | 下方偏上             | 以字元基線為對齊基準         |

---

#### ✨ `flex-wrap`（是否換行）

📌 **需搭配 `display: flex` 或 `inline-flex`** 才會生效

| 值              | 中文語感翻譯 | 換行行為 | 行為說明                          |
|------------------|--------------|-----------|-----------------------------------|
| `nowrap`         | 不換行       | ❌ 否      | 超出容器也不會換行（預設）        |
| `wrap` ★         | 自動換行     | ✅ 是      | 容器排滿會自動換行                |
| `wrap-reverse`   | 反向換行     | ✅ 是      | 多行從下往上                      |

---

#### ✨ `gap`（元素間距）

📌 **需搭配 `display: flex`、`grid` 或相關容器** 才會生效（用於子元素之間）

| 值         | 類型     | 語感翻譯   | 行為說明                        |
|------------|----------|------------|----------------------------------|
| `20px` ★   | 固定單位 | 固定像素間距 | 子元素之間保持 20px 間距         |
| `1rem`     | 相對單位 | 文字大小    | 根據字體大小計算的間距           |
| `0`        | 數值     | 無間距     | 取消子元素間隔                   |

📘 補充：
可改用 `row-gap` / `column-gap` 控制單向間距。

---

#### ✨ `align-content`（多行群組對齊方式）

📌 **需搭配 `display: flex` 或 `grid`**，且僅在子元素「多行」時有效

| 值             | 中文語感翻譯 | 對齊效果 | 行為說明 |
|----------------|--------------|----------|----------|
| `center`       | 中間對齊     | 居中     | 所有行群組置中對齊 |
| `stretch` ★    | 撐滿         | 平均     | 每行等比例撐滿容器 |
| `flex-start`   | 靠上         | 起點     | 所有群組從上方開始 |
| `flex-end`     | 靠下         | 終點     | 所有群組對齊底部 |
| `space-around` | 留空         | 平均分布 | 每群組上下平均留空 |

---

### 📍 定位屬性區塊（決定元素是否脫離排版流）

📌 不需搭配其他屬性即可生效，但通常與 `top` / `left` / `z-index` 等一同使用

#### 🔸 `position`（定位方式）

| 值 | 語感翻譯 | 是否佔空間 | 行為說明 |
|-----|-----------|--------------|------------|
| `static`★ | 靜態（預設） | ✅ 是 | 預設行為，正常排版、無定位效果 |
| `relative` | 相對定位 | ✅ 是 | 自己不動，可讓子元素以它為基準 |
| `absolute` | 絕對定位 | ❌ 否 | 完全跳脫排版，自由貼邊 |
| `fixed` | 固定定位 | ❌ 否 | 吸附在畫面上，捲動不消失 |
| `sticky` | 黏住定位 | ✅ 是 | 滾到某處時吸住，但保留排版空間 |

📘 補充說明：  
- `absolute` 與 `fixed` 會完全脫離原本的排版空間  
- `relative` 與 `sticky` 仍保留原來佔據的空間  
- `sticky` 的吸附效果需要設定 `top` / `bottom` 等參數才會生效

---

#### 🔸 `top` / `bottom` / `left` / `right`（定位參數）

📌 **需搭配 `position: relative / absolute / fixed / sticky`** 才有定位效果

📘 補充說明：  
- 這些屬性用來控制「貼邊的距離」  
- 必須搭配 `position: absolute / fixed / relative / sticky` 才有效果

| 定位方式 | 相對定位基準 |
|----------|------------------|
| `absolute` | **最近的 position ≠ static 的父元素** |
| `fixed` | **整個畫面視窗**（viewport） |
| `relative` | 自己偏移（不影響子元素） |
| `sticky` | 預設行為，直到觸發吸附條件（如 top: 0） |

---

#### 🔸 `z-index`（堆疊順序）

📌 **僅對 `position ≠ static` 的元素有效**

| 值         | 中文語感翻譯 | 是否改變排列順序 | 行為說明               |
| --------- | ------ | -------- | ------------------ |
| `0`       | 預設值    | ❌ 否      | 沒有特別指定順序（照 DOM 排序） |
| `1`, `10` | 正值     | ✅ 是      | 越大越上層，會蓋住值較小者      |
| `-1`      | 負值     | ✅ 是      | 被其他元素壓在下層          |

📘 補充說明：

* 適用於需要「誰蓋在誰上面」的情境，如 modal、浮動按鈕、dropdown。
* **必須搭配有定位的元素**（如 `absolute`, `fixed`, `relative`）才會生效。

---

#### 🔸 `float`（元素浮動）

📌 建議搭配 `width` 使用，避免浮動元素撐滿整行；會造成父元素「高度坍塌」

| 值       | 中文語感翻譯 | 是否脫離文流 | 建議搭配屬性   | 行為說明                    |
|----------|--------------|----------------|------------------|-----------------------------|
| `left`   | 左浮動       | ✅ 是           | ✅ `width`       | 貼左側並讓文字環繞          |
| `right`  | 右浮動       | ✅ 是           | ✅ `width`       | 貼右側並讓文字環繞          |
| `none` ★ | 不浮動       | ❌ 否           | ❌ 無            | 回到預設排版，不浮動        |

---

#### 🔸 `clear`（清除浮動）

📌 **通常用在浮動元素之後的元素上**，搭配 `.clearfix` 或 `::after` 使用

| 值       | 中文語感翻譯 | 使用時機      | 行為說明                     |
|----------|--------------|----------------|------------------------------|
| `left`   | 清除左浮動   | 有左浮動元素後 | 避免元素與左浮動重疊         |
| `right`  | 清除右浮動   | 有右浮動元素後 | 避免元素與右浮動重疊         |
| `both` ★ | 清除左右     | 最常見         | 元素排在所有浮動元素下方     |
| `none`   | 不清除       | 預設值         | 無清除效果                    |

```css
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
```

---

### ✨ 負空間屬性區塊（調整元素與邊界之間的距離）

#### 🔸 `margin` vs `padding`（外距與內距比較表）

📌 無需搭配其他屬性即可使用，皆為通用型排版工具

| 屬性       | 語感翻譯 | 改變的範圍             | 常見用途               |
|------------|----------|------------------------|------------------------|
| `margin`   | 外距     | 元素與其他元素之間的距離 | 控制區塊之間的間距     |
| `padding`  | 內距     | 元素內部與內容之間的距離 | 拉開邊框與文字的距離   |

---

#### 🔸 語法格式說明

📌 調整邊界距離的寫法，支援四種參數縮寫

📘 單值寫法 → 四邊皆同  
📘 雙值寫法 → 上下 / 左右  
📘 多值寫法 → 順序為「上 → 右 → 下 → 左」

```css
margin: 16px;        /* 四邊皆 16px */
padding: 8px 16px;   /* 上下 8px，左右 16px */
```

---

#### 🔸 `box-sizing`（邊框盒模型設定）

📌 **可單獨使用，也常用於全站初始化設定**

| 值             | 中文語感翻譯       | 計算方式            | 行為說明                                   |
|----------------|--------------------|---------------------|--------------------------------------------|
| `content-box`  | 內容盒（預設）     | 只算內容本體         | padding / border 額外增加整體尺寸          |
| `border-box` ★ | 邊框盒（常用推薦） | 包含 padding / border | padding / border 不會讓寬高變大，排版更穩定 |

📘 補充說明：
- `box-sizing` 決定「距離（padding / border）」是否會影響元素的寬高。
- 預設為 `content-box`，但開發實務上幾乎都會改成 `border-box`。
- 只要有需要設定padding、border的時候就可以直接無腦加上
- 建議在專案初始化階段，於全站預設套用：

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

---

#### 🔸 `visibility`（可見性控制）

📌 **控制元素是否顯示，但不影響其佔位空間**

| 值         | 中文語感翻譯 | 是否佔空間 | 行為說明         |
| --------- | ------ | ----- | ------------ |
| `visible` | 可見（預設） | ✅ 是   | 元素正常顯示       |
| `hidden`  | 隱藏     | ✅ 是   | 元素不顯示但仍佔排版空間 |

📘 補充說明：

* 與 `display: none` 的差異是：**`visibility: hidden` 不會移除版面空間。**
* 常用於滑入滑出動畫的前置狀態、SEO 或可存取性優化等情境。

---

#### 🔸 距離單位比較表

📌 常用單位說明，影響 margin、padding、gap 等

| 單位  | 中文語感翻譯       | 是否固定 | 說明                           |
|-------|--------------------|----------|--------------------------------|
| `px`  | 固定像素           | ✅ 是     | 固定距離，縮放時比例會變化     |
| `rem` | 根字體大小倍數     | ❌ 否     | 彈性單位，1rem 通常等於 16px   |
| `%`   | 百分比             | ❌ 否     | 相對於父元素尺寸               |
| `em`  | 自身字體大小倍數   | ❌ 否     | 彈性單位，會受內層元素影響     |

---

#### 🔸 `gap`（子元素間距）

📌 需搭配 `display: flex` 或 `grid` 使用，常用於控制子元素「之間」的間距（非內距）

| 值       | 語感翻譯     | 常見單位 | 行為說明                          |
|----------|--------------|----------|-----------------------------------|
| `20px`   | 固定距離     | px       | 子元素之間固定 20px 間距         |
| `1rem`   | 相對距離     | rem      | 跟隨字體大小變化，約等於 16px     |
| `0`      | 無間距       | 整數     | 子元素緊貼無間隔                 |

📘 補充說明：
- `gap` 控制的是「子元素之間」的距離，不會影響整個容器大小。
- 若需針對方向控制，也可以使用：
  - `row-gap`：只調整上下
  - `column-gap`：只調整左右

## 🧱 三、刻畫面 CSS 必寫屬性 × 分類對照表

### 🟦 全站通用：版型大骨架用（通常寫在 `body` 或 `.container`）

| 分類 | 屬性（含值翻譯） | 用途 |
|------|------------------|------|
| 排版屬性 | `display: flex（彈性排版）` / `grid（格線排版）` | 建立主排版系統 |
| 媒體與響應屬性 | `width: 100%（寬度百分百）` / `max-width: 1200px（最大寬度限制）` | 設定容器寬度限制（RWD 用） |
| 負空間屬性 | `margin: 0 auto（上下為 0，左右自動置中）` | 置中外層容器 |
| 負空間屬性 | `padding: 20px（內距 20px）` | 撐開內距 |
| 媒體與響應屬性 | `box-sizing: border-box（邊框盒模式）` | 寬高包含 padding / border，避免排版爆掉 |
| 排版屬性 | `position: relative（相對定位）` | 提供子元素定位基準（absolute 對齊） |
| 排版屬性 | `min-height: 100vh（最小高度為 100% 視窗）` | 撐滿畫面高度，避免區塊過短 |

### 🟨 區塊元件（卡片、欄位、區域）

| 分類 | 屬性（含值翻譯） | 用途 |
|------|------------------|------|
| 負空間屬性 | `padding: 16px` | 內距避免內容貼邊 |
| 視覺屬性 | `background-color: #eee（背景顏色）` | 測試範圍或區塊底色 |
| 視覺屬性 | `border-radius: 8px（圓角）` | 柔化區塊邊緣（美觀） |
| 視覺屬性 | `box-shadow: 0 0 10px #ccc（陰影）` | 提升層次感（常見於卡片） |
| 排版屬性 | `display: flex / grid` | 區塊內部排版 |
| 負空間屬性 | `gap: 12px（間距）` | 區塊內元素之間的距離 |

### 🟩 文字元件（標題、段落、按鈕文字）

| 分類 | 屬性（含值翻譯） | 用途 |
|------|------------------|------|
| 視覺屬性 | `font-size: 16px（字體大小）` | 設定文字基本大小 |
| 視覺屬性 | `font-weight: 700（粗體）` | 提升文字權重（標題用） |
| 視覺屬性 | `line-height: 1.5（行高）` | 控制文字垂直距離，避免擁擠 |
| 視覺屬性 | `color: #333（文字顏色）` | 設定文字閱讀色彩 |
| 視覺互動屬性 | `text-align: center / left（文字對齊）` | 決定文字排列位置 |
| 負空間屬性 | `margin-bottom: 1em（段落間距）` | 拉開段落或標題與下方距離 |

### 🟥 表單與按鈕元件（含互動）

| 分類 | 屬性（含值翻譯） | 用途 |
|------|------------------|------|
| 視覺屬性 | `background-color: #007bff（背景色）` | 設定按鈕主色調 |
| 視覺屬性 | `color: white（文字色）` | 反差顯眼、好辨識 |
| 負空間屬性 | `padding: 8px 16px（上下內距 8px、左右 16px）` | 擴大點擊範圍與視覺大小 |
| 視覺屬性 | `border-radius: 4px（圓角）` | 圓潤邊緣常見於現代按鈕 |
| 視覺互動屬性 | `cursor: pointer（滑鼠指標為可點擊）` | 給使用者互動提示 |
| 動畫與轉場屬性 | `transition: 0.3s（0.3 秒過渡動畫）` | 滑入滑出時的柔和動畫 |
| 動畫與轉場屬性 | `:hover`（偽類） | 滑鼠移入時變色 / 改變陰影等視覺效果 |

### 🧩 常見實用情境（進階組合技巧）

| 分類 | 屬性（含值翻譯） | 用途 |
|------|------------------|------|
| 排版屬性 | `display: flex` + `justify-content: center（主軸置中）` + `align-items: center（交錯軸置中）` | **中間置中：水平 + 垂直置中** |
| 排版屬性 | `position: absolute（絕對定位）` + `top: 0; right: 0` | **右上角貼齊定位** |
| 排版屬性 | `object-fit: cover（填滿不變形）` + `width: 100%; height: 100%` | **圖片自適應填滿容器** |
| 視覺屬性 | `overflow: hidden（裁切超出內容）` | **避免圖片或內容溢出邊界** |


---
## 🧲 四、排版目標 × 排版工具選擇表
以想要的效果為主導，如果我想要什麼效果，我可以做什麼設定！

| 🎯 想要的效果 | ✅ 建議語法 | 📘 常見用途 / 備註 |
|------------------|---------------------------|----------------------------|
| 區塊水平置中（固定寬度） | `margin: 0 auto;` | 元素需設定 `width` 才會生效 |
| 行內元素置中（圖片、icon） | `text-align: center;`（加在父層） | 適用於 `img`、`inline` 元素等 |
| 元素平均左右分散 | `display: flex; justify-content: space-between;` | 導覽列、按鈕群等左右貼齊排法 |
| 區塊上下左右置中 | `display: flex; justify-content: center; align-items: center;` | 元素完全置中，常見登入卡片 |
| 多欄自動排版（RWD） | `display: grid; grid-template-columns: repeat(auto-fit, minmax(...));` | 商品卡片牆、自動換行排法 |
| 固定角落位置 | `position: fixed; bottom: 20px; right: 20px;` | 常見於回到頂端按鈕、漂浮功能鍵 |
| 元素過多自動換行 | `flex-wrap: wrap;`（配合 `min-width`） | RWD 流動排版用於卡片群組 |
| 垂直單列排列 | `display: flex; flex-direction: column;` | 表單欄位上下排、導覽列等 |

---

## 🛠️ 五、屬性加在哪一層？ × 控制對象分類說明


### 🔹 父元素要加的（控制子元素排法）

| 屬性名稱 | 屬性值 | 功能說明 | 控制對象 | 補充說明 |
|-----------|---------|------------|-------------|--------------|
| `display` | `flex / grid` | 建立排版系統 | 控制子元素排法 | 改變子元素排列方式與方向 |
| `justify-content` | `space-between / center` | 主軸對齊 | 控制子元素位置 | Flex：水平、Grid：依方向變動 |
| `align-items` | `center` | 交錯軸對齊 | 控制子元素位置 | 常見垂直置中，需搭配 `flex` |
| `gap` | `20px（或任意間距）` | 間距設定 | 控制子元素之間距離 | 控制子項固定間隔，勝過 `margin` |
| `flex-wrap` | `wrap` | 自動換行 | 控制子元素是否換行 | 子元素過多時是否另起一行 |
| `align-content` | `center / space-around` | 多行內容對齊方式 | 控制多行群組 | 與 `gap + wrap` 常見搭配，用於 Grid 或多行 Flex |

### 🔵 自己要加的（作用在自己本身）

| 屬性名稱 | 屬性值 | 功能說明 | 控制對象 | 補充說明 |
|-----------|---------|------------|-------------|--------------|
| `margin` | `0 auto` | 自動置中 | 自己 | 常搭配固定寬度達成水平置中 |
| `flex` | `1`（或比例） | 彈性放大縮小 | 自己 | Flex 子項間的比例控制 |
| `position` | `absolute / fixed` | 定位 | 自己 | 用於貼齊角落、漂浮等需求 |

### 🔸 子元素限定（僅在父層為 flex / grid 時生效）

| 屬性名稱 | 屬性值 | 功能說明 | 補充說明 |
|-----------|---------|------------|--------------|
| `align-self` | `center / flex-end` | 單一子元素個別對齊 | 常見於微調單個欄位、按鈕等位置 |
| `order` | `1 / 2 / -1` | 子元素排序 | 控制元素出現順序 |

---

## 🐞 六、常見錯誤 × 排查建議表（錯誤備忘錄）

| 錯誤類型 | 常見錯誤寫法 | 原因說明 | 解決建議 |
|----------|----------------|------------|------------|
| ❌ `margin: 0 auto;` 無效 | 忘記設定寬度 | `auto` 僅在固定寬度下有效 | 加上 `width: 400px` 等設定 |
| ❌ `flex` 沒效果 | 子元素無變化 | 父層未加 `display: flex` | 確保外層加上 `display: flex` |
| ❌ `gap` 無效 | 在 block 元素使用 | `gap` 只支援 `flex` / `grid` | 改用 `margin` 或加上 `display: flex` |
| ❌ `text-align: center;` 無效 | 加在 `img` 自身 | 行內元素需父層對齊 | 將語法加在外層容器 |
| ❌ `absolute` 對齊錯誤 | 元素亂飄 | 缺少定位基準 | 父層加上 `position: relative` |
| ❌ `flex-direction` 無效 | 垂直沒出現 | 忘記加 `display: flex` | `flex-direction` 需搭配 `flex` 才有作用 |

---
## 🧩 七、排版屬性 × 控制對象 × 值與語感對照

### 📑 一、快速查表（分類總覽）

| 屬性             | 加在哪裡         | 控制誰會排版                   | 常見值（★常用）                                            |
|------------------|------------------|-------------------------------|-------------------------------------------------------------|
| `display`        | 父層             | 子元素                         | `flex`★, `grid`★, `block`, `inline`                        |
| `justify-content`| 父層             | 子元素（主軸對齊）             | `center`★, `space-between`★, `flex-start`, `flex-end`      |
| `align-items`    | 父層             | 子元素（交錯軸對齊）           | `center`★, `stretch`★, `flex-start`, `flex-end`            |
| `gap`            | 父層             | 子元素之間的距離               | `20px`★, `1rem`, `0`                                        |
| `flex-wrap`      | 父層             | 子元素是否換行                 | `wrap`★, `nowrap`, `wrap-reverse`                          |
| `align-content`  | 父層             | 多行子元素（群組對齊）         | `center`, `space-around`, `stretch`★                       |
| `margin`         | 自己             | 自己與外部元素的距離           | `0 auto`★, `16px`, `1em`, `margin-bottom`, `margin-top`    |
| `padding`        | 自己             | 自己的內部空間                 | `16px`, `8px 16px`                                         |
| `width / max-width` | 自己         | 自己寬度                       | `100%`★, `1200px`                                           |
| `min-height`     | 自己             | 自己最小高度                   | `100vh`★, `200px`                                           |
| `box-sizing`     | 自己             | 自己的盒模型計算模式           | `border-box`★, `content-box`                                |
| `position`       | 自己             | 自己的位置與對齊方式           | `relative`★, `absolute`★, `fixed`, `sticky`, `static`       |
| `overflow`       | 自己             | 超出內容的處理方式             | `hidden`★, `scroll`, `auto`                                 |
| `object-fit`     | 自己（圖片）     | 圖片如何填滿容器               | `cover`★, `contain`                                         |
| `flex`           | 自己（Flex子項） | 子元素佔空間比例               | `1`★, `2`, `0 1 auto`                                       |
| `align-self`     | 自己           | 覆蓋父層設定，個別對齊         | `center`★, `flex-end`, `stretch`                            |
| `order`          | 自己           | 顯示順序                       | `0`★, `-1`, `99`                                            |

---
### 📘 二、詳細屬性說明

---

#### 🔸 `text-align`（文字對齊方式）

📌 **作用於文字與行內元素的對齊方式，寫在容器上控制其內容對齊**

| 值          | 中文語感翻譯 | 作用對象    | 行為說明            |
| ---------- | ------ | ------- | --------------- |
| `left`     | 靠左對齊   | 行內元素、文字 | 對齊容器左側          |
| `center` ★ | 置中對齊   | 行內元素、文字 | 對齊容器中間          |
| `right`    | 靠右對齊   | 行內元素、文字 | 對齊容器右側          |
| `justify`  | 左右對齊   | 段落文字    | 文字兩端貼齊，常見於報導或報表 |

📘 補充說明：

* 常用於對齊圖片、icon、段落、按鈕等。
* 對 `img` 等行內元素有效，**需寫在其父層容器上。**

---

#### 🔹 加在父層 → 控制子元素排法

##### ✨ display（排版方式）
🔣 語法格式：`display: 顯示模式;`  
🔧 功能說明：決定元素的排版型態（是否為彈性容器等）  
🎯 控制對象：自己 + 子元素（若為 flex / grid）  
💡 常見值：
- `block`：區塊元素，自動換行
- `inline`：行內元素，與其他同行不換行
- `flex` ★：彈性容器（可控制主軸與交錯軸）
- `grid` ★：格線容器（可指定欄與列）  
🧾 適用：`.container`, `.card`（包裹內容的容器）

---

##### ✨ justify-content（主軸對齊）
🔣 `justify-content: 對齊方式;`  
🔧 控制子元素在主軸（如水平）的對齊方式  
🎯 控制對象：子元素在主軸上的位置  
💡 常見值：
- `center` ★：置中
- `space-between` ★：兩端貼齊，平均間隔
- `flex-start`：靠主軸起點
- `flex-end`：靠主軸尾端  
🧾 適用：`.nav`, `.row`, `.toolbar`

---

##### ✨ align-items（交錯軸對齊）
🔣 `align-items: 對齊方式;`  
🔧 控制子元素在交錯軸（如垂直）上的對齊  
🎯 控制對象：子元素在交錯軸上的位置  
💡 常見值：
- `center` ★：垂直置中
- `stretch` ★：撐滿交錯軸高度
- `flex-start`：靠上
- `flex-end`：靠下  
🧾 適用：`.row`, `.card-list`

---

##### ✨ gap（子元素間距）
🔣 `gap: 數值;`  
🔧 子元素之間的間隔距離（支援 Flex / Grid）  
🎯 控制對象：子元素彼此之間的距離  
💡 常見值：`20px` ★, `1rem`, `0`  
🧾 適用：`.grid-list`, `.row`, `.form-group`

---

##### ✨ flex-wrap（是否換行）
🔣 `flex-wrap: wrap;`  
🔧 決定子元素是否超出時自動換行  
🎯 控制對象：子元素是否折行顯示  
💡 常見值：
- `wrap` ★：自動換行
- `nowrap`：不換行（預設）
- `wrap-reverse`：反向換行  
🧾 適用：`.row`, `.tag-list`, `.card-group`

---

##### ✨ align-content（多行群組對齊）
🔣 `align-content: 對齊方式;`  
🔧 控制多行子元素（多排）群組整體對齊方式  
🎯 控制對象：多行子元素群組整體位置  
💡 常見值：
- `center`
- `space-around`
- `stretch` ★  
🧾 適用：多行 `.card-wrap`, `.item-grid`

---

#### 🔸 `place-items` / `place-content`（Grid 縮寫語法）

📌 **僅支援 `display: grid`，可同時設定水平與垂直對齊方式**

| 屬性              | 對應長寫                                | 語感翻譯   | 用途說明              |
| --------------- | ----------------------------------- | ------ | ----------------- |
| `place-items`   | `align-items` + `justify-items`     | 對齊子元素  | 同時控制子項的主軸與交錯軸對齊方式 |
| `place-content` | `align-content` + `justify-content` | 對齊多行群組 | 同時控制多行排列的整體對齊方式   |

📘 補充說明：

* 類似於 `shorthand`，可簡化 CSS 並提升閱讀性。
* Flex 不支援這組語法。

---

#### 🔵 加在自己 → 控制自己的排版與行為

##### ✨ margin（外距）
🔣 `margin: 數值;` 或 `margin-left: ...`  
🔧 控制元素與外部其他元素的距離  
🎯 控制對象：自己的外距空間  
💡 常見值：
- `0 auto` ★：水平置中（需設定寬度）
- `16px`, `1em`, `margin-bottom: 1rem`  
🧾 適用：`.card`, `.section`, `.paragraph`

---

##### ✨ padding（內距）
🔣 `padding: 數值;` 或 `padding: 上下 左右`  
🔧 控制內容與邊框之間的空間  
🎯 控制對象：內部空間（內容不貼邊）  
💡 常見值：
- `16px`：四邊皆相同
- `8px 16px`：上下 8px，左右 16px  
🧾 適用：`.button`, `.input`, `.card`

---

##### ✨ width / max-width（寬度設定）
🔣 `width: 數值;`、`max-width: 數值;`  
🔧 控制元素寬度與最大寬度  
🎯 控制對象：自身寬度限制  
💡 常見值：
- `100%` ★：撐滿容器
- `1200px`, `500px`, `80%`  
🧾 適用：`.container`, `.content`

---

##### ✨ min-height（最小高度）
🔣 `min-height: 數值;`  
🔧 保證元素至少有某個高度  
🎯 控制對象：自己高度下限  
💡 常見值：`100vh` ★（滿版高度）, `200px`  
🧾 適用：`.section`, `.wrapper`, `.hero`

---

##### ✨ box-sizing（盒模型）
🔣 `box-sizing: 模式;`  
🔧 控制寬高是否包含 padding/border  
🎯 控制對象：尺寸計算方式  
💡 常見值：
- `border-box` ★（推薦，寬高內含 padding）
- `content-box`（預設，會加大尺寸）  
🧾 適用：通用所有容器建議加

---

##### ✨ position（定位類型）
🔣 `position: 類型;`  
🔧 控制定位模式，決定是否脫離排版流  
🎯 控制對象：自身位置與對齊  
💡 常見值：
- `relative` ★：原地不動，提供基準
- `absolute` ★：自由貼邊、角落定位
- `fixed`：固定在視窗上（不捲動）
- `sticky`：滾到時吸附在上方  
🧾 適用：`.icon`, `.btn-float`, `.header`

---

##### ✨ overflow（溢出處理）
🔣 `overflow: 處理方式;`  
🔧 控制內容溢出時如何顯示  
🎯 控制對象：自身超出部分處理邏輯  
💡 常見值：
- `hidden` ★：裁切不顯示
- `scroll`：強制出現捲軸
- `auto`：自動判斷是否顯示捲軸  
🧾 適用：圖片裁切、滾動區域

📘 類別說明補充：
> 雖不屬於排版屬性，但常與排版配合，用於控制內容超出時的處理邏輯。可視為「**視覺輔助屬性**」，與 `position`, `object-fit` 等屬性常聯用。

---

##### ✨ object-fit（圖片填滿）
🔣 `object-fit: 模式;`  
🔧 控制圖片在容器內的縮放方式  
🎯 控制對象：圖片 or 媒體顯示效果  
💡 常見值：
- `cover` ★：鋪滿不變形（會裁切）
- `contain`：完整顯示不裁切  
🧾 適用：`.banner img`, `.thumbnail`

---

#### 🔸 子元素限定（需搭配 Flex / Grid）

##### ✨ flex（彈性比例）
🔣 `flex: 數值;`  
🔧 控制子元素在彈性排版中佔多少空間  
🎯 控制對象：子元素寬度比例（Flex）  
💡 常見值：
- `1` ★：平均分配
- `2`：雙倍寬
- `0 1 auto`：預設值  
🧾 適用：`.col`, `.flex-item`

---

##### ✨ align-self（個別對齊）
🔣 `align-self: 對齊方式;`  
🔧 打破父層統一對齊，單獨調整子元素對齊方式  
🎯 控制對象：自己（子元素）位置  
💡 常見值：
- `center` ★：個別垂直置中
- `flex-end`：靠底
- `stretch`：撐滿  
🧾 適用：`.item`, `.card`, `.nav-link`

---

##### ✨ order（順序）
🔣 `order: 數字;`  
🔧 調整子元素排列順序（不改 HTML）  
🎯 控制對象：子元素顯示順序  
💡 常見值：
- `0` ★（預設）
- `-1`（最前）
- `99`（最後）  
🧾 適用：`.tab`, `.card`, `.action-btn`