# 刻板必備：排版 × 定位 × 屬性對照指南
## 📖 一、排版概念說明：什麼是排版？什麼是骨架？
切版的本質就是：**安排每個實體區塊在頁面上的位置與分布。**
你會遇到這些排法：
- 區塊**上下排列**（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`
Sign in with Wallet
Connect another wallet