display 是 CSS 佈局的基因開關。它決定元素如何參與文檔流、如何生成盒子、如何與兄弟元素交互。掌握 display 的各類值與行為差異，是從「寫出樣式」進階到「掌控佈局」的關鍵。
| 值 | 盒子類型 | 文檔流行為 | 典型元素 | 可設置寬高/內邊距/邊框 |
|---|---|---|---|---|
inline | 行內盒 | 不換行，與文字同行流動 | <span>, <a>, <strong> | 寬高無效；水平 padding/border/margin 生效，垂直方向不影響行高 |
block | 塊級盒 | 獨佔一行，前後換行 | <div>, <p>, <h1-h6> | 完全生效 |
none | 不生成盒子 | 從文檔流移除，佔據 0 空間 | 隱藏元素 | 不可操作 |
display: none vs visibility: hiddendisplay: none：元素徹底消失，**不佔空間**，後續元素補位。visibility: hidden：元素**不可見但保留幾何位置**，佔空間，後續元素不動。無需 HTML <table> 標籤即可實現表格佈局特性：
| 值 | 對應 HTML | 用途 |
|---|---|---|
table | <table> | 外層容器 |
table-row | <tr> | 行容器 |
table-cell | <td> | 單元格，**支援 vertical-align、自動等高** |
table-column | <col> | 列屬性（極少用） |
table-row-group | <tbody> | 行組 |
table-header-group | <thead> | 表頭組（打印重複） |
table-footer-group | <tfoot> | 表尾組 |
table-caption | <caption> | 標題 |
inline-table | - | 行內表格，不換行 |
.parent { display: table; width: 100%; }
.child { display: table-cell; vertical-align: middle; }優勢：語義化 HTML（用 <div>），無需浮動/定位/柔性盒子即可實現傳統難點。
**數據型內容請務必用 HTML <table>**。CSS Table 僅用於佈局輔助，濫用會嚴重損害無障礙性（屏幕閱讀器無法識別語義）。
| 值 | 行為 | 兼容性/備註 |
|---|---|---|
list-item | 生成主塊盒 + 列表項標記盒 (::marker) | 需嵌套在 <ul/ol> 中正確顯示 |
run-in | 視父元素決定：父為塊→行內；父為行內→塊 | **主流瀏覽器不支援** (Chrome/Firefox/Edge 均移除) |
compact | 類似 run-in，依賴上下文 | **已廢棄，無瀏覽器實現** |
marker | 配合 ::before/::after 的 content 使用 | 極少直接聲明，通常由 UA 樣式表自動應用 |
display: flex / grid 創建**柔性/網格格式化上下文**，子元素成為 Flex/Grid 項目，擁有強大的對齊、分配、排序能力。
.flex-container { display: flex; justify-content: space-between; align-items: center; }
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }**建議**：新項目優先 Flex/Grid，舊項目維護時理解 inline/block/none/table 即可。
li { display: inline-block; } 或 flex。@media print { nav, aside { display: none; } }。h1 { display: inline; } .subtitle { display: inline; margin-left: 1em; }。img { display: block; } 或 vertical-align: bottom;。
