CSS display 屬性詳解（完整版）

---

1. 屬性值及特性詳解

display 屬性控制元素的布局類型和生成的框類型，以下是 所有有效值 及其特性：

---

1.1 基礎類型

值	描述	布局行為	是否生成塊級框	典型用途
block	元素獨占一行，寬度自動撐滿父容器	自動換行，可設置寬高	是	容器元素（如 div, header）
inline	與相鄰元素同行，寬度由內容決定	不換行，不可設置寬高	否	內聯元素（如 span, a）
inline-block	結合 block 和 inline 特性	可設置寬高，與文本同行	否	圖標+文字組合
none	隱藏元素，且不參與布局	完全移除元素	-	動態隱藏元素

---

1.2 彈性 & 網格布局

值	描述	布局行為	兼容性注釋
flex	定義彈性容器，子元素為 Flex 項	通過 flex-direction 等控制排列方向	需 -webkit- 前綴支持舊版
inline-flex	內聯彈性容器，不獨占一行	類似 flex，但與文本同行	同上
grid	定義網格容器，子元素為 Grid 項	通過 grid-template-columns 等定義網格	需 -ms- 前綴支持舊版
inline-grid	內聯網格容器，不獨占一行	類似 grid，但與文本同行	同上

---

1.3 表格相關類型

模擬表格布局的元素：

值	類似 HTML 標簽	布局行為
table	<table>	作為表格容器
table-row	<tr>	表示表格行
table-cell	<td> 或 <th>	表示表格單元格
table-row-group	<tbody>	表格行組（如 <thead>, <tbody>）
table-header-group	<thead>	表格表頭組
table-footer-group	<tfoot>	表格表尾組
table-column	<col>	定義表格列
table-column-group	<colgroup>	定義列組

---

1.4 其他特殊值

值	描述	特殊行為
contents	元素自身消失，子元素繼承父級樣式	類似“拆解”元素，常用于替換容器結構
list-item	生成列表項（如 <li>）	自動添加項目符號（可通過 list-style 控制）
run-in	嘗試以內聯形式“跑入”前/后元素	若前后元素為塊級，則自身轉為塊級；若為內聯，則合并到內聯元素中

---

1.5 過時值（已棄用）

值	替代方案
inline-table	使用 display: table + 寬度設置
compact	不推薦，可用 margin 替代

---

2. 組合使用場景

• inline-flex vs flex

  • flex: 獨占一行，適合容器布局（如導航欄）。
  • inline-flex: 與文本同行，適合內聯彈窗或工具欄。

• table-cell 組合

css.table-container { display: table; width: 100%; }.row { display: table-row; }.cell { display: table-cell; }

模擬表格布局，避免使用真實表格標簽。

• flex 與 none 組合
  隱藏 Flex 子項但保留布局空間：

css.hidden-item { display: none; }  /* 完全隱藏，不占位 */.invisible-item { visibility: hidden; }  /* 隱藏但保留空間 */

3. 完整對比表格

值	布局類型	是否生成塊級框	是否占位	常見用途	兼容性
block	塊級	是	是	容器元素	全部支持
inline	內聯	否	是	文本元素	全部支持
inline-block	內聯塊級	否	是	圖標+文字組合	全部支持
flex	彈性容器	是	是	響應式布局	需前綴（舊版）
inline-flex	內聯彈性	否	是	內聯彈窗	需前綴（舊版）
grid	網格容器	是	是	復雜布局（如卡片列表）	需前綴（舊版）
inline-grid	內聯網格	否	是	內聯網格	需前綴（舊版）
table	表格容器	是	是	替代 <table>	全部支持
table-cell	表格單元格	否	是	表格布局單元格	全部支持
contents	透明容器	否	否	替換容器結構	部分現代瀏覽器支持
none	隱藏元素	-	否	動態隱藏元素	全部支持

---

4. 注意事項

• display: contents 的風險：元素消失后，子元素會繼承父級樣式，可能導致布局混亂。
• run-in 的局限性：瀏覽器支持有限，且行為復雜，建議避免使用。
• 響應式設計：通過 @media 結合 display 可切換布局模式（如移動端 block → 桌面端 inline-block）。