css基础-display 常用布局

CSS display 属性详解

属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

一、基础显示模式

1. block

作用：

元素独占一行
可设置宽高和内外边距
默认宽度撑满父容器

应用场景：

布局容器（div/section/article）
段落文本（p）
列表项（li默认样式）

css 复制代码

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

1. inline

作用：

元素水平排列
不可设置宽高
宽度由内容决定

应用场景：

文字修饰元素（span/em/strong）
超链接（a）默认样式
行内文本元素

css 复制代码

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

3. inline-block

作用：

兼具块级与行内特性
可设置宽高
元素水平排列

应用场景：

导航菜单项
图标按钮
表单控件对齐

css 复制代码

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

二、现代布局模式

1. flex

快速了解CSS弹性布局

主要设置元素

作用：

创建弹性盒子布局
主轴/交叉轴排列控制
子元素弹性伸缩

应用场景：

响应式导航栏
卡片等分布局
垂直居中实现

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

作用：

创建网格布局
二维布局控制
精确行列定义

应用场景：

仪表盘布局
图片画廊
复杂表单布局

css 复制代码

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

三、特殊显示模式

1. none

作用：

元素完全隐藏
不占据文档流空间

应用场景：

动态显示/隐藏元素
响应式隐藏某些内容

css 复制代码

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

table 系列

属性值	作用	应用场景
table	模拟<table>元素	表格样式布局
table-row	模拟<tr>	配合表格布局使用
table-cell	模拟<td>/<th>	垂直居中解决方案

css 复制代码

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

3. list-item

作用：

显示为列表项
生成标记框（如圆点）

应用场景：

自定义列表样式
有序/无序列表改造

css 复制代码

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

四、混合模式

1. inline-flex

特点：

行内级弹性容器
外部表现像inline
内部使用flex布局

css 复制代码

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

2. inline-grid

特点：

行内级网格容器
外部表现像inline
内部使用grid布局

css 复制代码

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

其他

1. contents

作用：

元素自身不生成盒子
子元素提升到父级层级

应用场景：

无障碍优化
布局结构调整

示例：

html 复制代码

<!-- 移除中间容器层级 -->
<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值，可以构建出各种复杂的现代网页布局 🚀