CSS display 屬性詳解

屬性設置元素是否被視為塊級或行級盒子以及用于子元素的布局，例如流式布局、網格布局或彈性布局。

一、基礎顯示模式

1. block

作用：

• 元素獨占一行
• 可設置寬高和內外邊距
• 默認寬度撐滿父容器

應用場景：

• 布局容器（div/section/article）
• 段落文本（p）
• 列表項（li默認樣式）

div {display: block;width: 80%;margin: 0 auto;
}
/* 創建通欄頁眉 */
.header {display: block;width: 100%;height: 60px;background: #333;
}

1. inline

作用：

• 元素水平排列
• 不可設置寬高
• 寬度由內容決定

應用場景：

• 文字修飾元素（span/em/strong）
• 超鏈接（a）默認樣式
• 行內文本元素

span {display: inline;color: red;/* width: 100px; 無效 */
}

3. inline-block

作用：

• 兼具塊級與行內特性
• 可設置寬高
• 元素水平排列

應用場景：

• 導航菜單項
• 圖標按鈕
• 表單控件對齊

.nav-item {display: inline-block;width: 120px;padding: 10px;
}

二、現代布局模式

1. flex

快速了解CSS彈性布局

主要設置元素

作用：

• 創建彈性盒子布局
• 主軸/交叉軸排列控制
• 子元素彈性伸縮

應用場景：

• 響應式導航欄
• 卡片等分布局
• 垂直居中實現

.container {display: flex;justify-content: space-between;align-items: center;
}.card-container {display: flex;gap: 20px;justify-content: space-around;align-items: center;
}

1. grid

作用：

• 創建網格布局
• 二維布局控制
• 精確行列定義

應用場景：

• 儀表盤布局
• 圖片畫廊
• 復雜表單布局

.grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 20px;
}

三、特殊顯示模式

1. none

作用：

• 元素完全隱藏
• 不占據文檔流空間

應用場景：

• 動態顯示/隱藏元素
• 響應式隱藏某些內容

.mobile-menu {display: none;
}
@media (max-width: 768px) {.mobile-menu {display: block;}
}

table 系列

屬性值	作用	應用場景
table	模擬<table>元素	表格樣式布局
table-row	模擬<tr>	配合表格布局使用
table-cell	模擬<td>/<th>	垂直居中解決方案

/* 傳統垂直居中方案 */
.vertical-center {display: table-cell;vertical-align: middle;height: 200px;
}

3. list-item

作用：

• 顯示為列表項
• 生成標記框（如圓點）

應用場景：

• 自定義列表樣式
• 有序/無序列表改造

.custom-list {display: list-item;list-style-type: square;margin-left: 20px;
}

四、混合模式

1. inline-flex

特點：

• 行內級彈性容器
• 外部表現像inline
• 內部使用flex布局

.inline-flex-container {display: inline-flex;align-items: center;
}

2. inline-grid

特點：

• 行內級網格容器
• 外部表現像inline
• 內部使用grid布局

.inline-grid-container {display: inline-grid;grid-template-columns: repeat(3, 100px);
}

其他

1. contents

作用：

• 元素自身不生成盒子
• 子元素提升到父級層級

應用場景：

• 無障礙優化
• 布局結構調整

示例：

<!-- 移除中間容器層級 -->
<div class="wrapper" style="display: contents"><section>直接內容</section>
</div>

2. flow-root

作用：

• 創建BFC塊級格式化上下文
• 解決浮動塌陷問題

應用場景：

• 清除浮動
• 防止外邊距合并

📌 使用建議

優先使用現代布局：Flex/Grid > Float/Table

注意瀏覽器兼容性：

• Grid布局需要IE11+
• flow-root需要Chrome58+/Firefox53+

📚 綜合對比表

屬性值	布局維度	是否換行	尺寸控制	典型應用
block	一維	是	支持	結構容器
inline	一維	否	不支持	文本元素
inline-block	一維	否	支持	導航項
flex	一維	可選	支持	響應式布局
grid	二維	可選	支持	復雜布局
table	-cell	一維	否	支持

合理選擇顯示模式：

• 需要水平排列：inline-block / flex
• 需要二維布局：grid
• 隱藏元素優先用opacity: 0 + visibility: hidden代替display: none
• 避免濫用!important：保持樣式可維護性

通過合理組合使用這些display值，可以構建出各種復雜的現代網頁布局 🚀