css基础-display 常用布局

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值，可以构建出各种复杂的现代网页布局 🚀