CSS中的display属性用于定义元素生成的显示框类型，直接决定了元素在页面中的布局方式和与其他元素的排列方式，是前端布局中非常核心的属性之一。不同的display属性值对应不同的渲染规则，理解这些属性值的特性是做好页面布局的基础。
display属性的常见属性值分类
display的属性值可以分为几大类，分别是基础显示类型、弹性布局类型、网格布局类型等，下面我们逐一介绍最常用的几个属性值。
1. block（块级元素）
设置display: block的元素会生成块级框，这类元素的特点如下：
- 默认会独占一行，宽度默认填满父容器的可用宽度
- 可以设置宽度、高度、内边距、外边距等盒模型属性
- 常见的默认块级元素有<div>、<p>、<h1>~<h6>、<ul>等
以下是block属性的使用示例：
/* 将行内元素span转为块级元素 */
span {
display: block;
width: 200px;
height: 50px;
background-color: #f0f0f0;
margin: 10px 0;
}
2. inline（行内元素）
设置display: inline的元素会生成行内框，这类元素的特点如下：
- 不会独占一行，会和相邻的行内元素在同一行排列，直到一行排不下才会换行
- 默认宽度由内容决定，无法直接设置宽度和高度
- 上下外边距设置无效，左右外边距有效
- 常见的默认行内元素有<span>、<a>、<strong>、<em>等
以下是inline属性的使用示例：
/* 将块级元素div转为行内元素 */
div {
display: inline;
background-color: #e8f4ff;
/* 以下宽高设置不会生效 */
width: 200px;
height: 50px;
}
3. inline-block（行内块元素）
设置display: inline-block的元素兼具行内元素和块级元素的特点：
- 不会独占一行，可以和相邻行内元素在同一行排列
- 可以正常设置宽度、高度、内外边距等盒模型属性
- 常用于需要在一行排列但又需要设置固定尺寸的组件，比如按钮、图标等
以下是inline-block属性的使用示例：
/* 实现一行排列的按钮组 */
.btn {
display: inline-block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #1890ff;
color: #fff;
margin-right: 10px;
border-radius: 4px;
}
4. flex（弹性布局容器）
设置display: flex的元素会成为弹性布局容器，它的所有直接子元素都会成为弹性项目，这是现代布局中非常常用的属性值：
- 容器默认存在两根轴：水平的主轴和垂直的交叉轴
- 子元素的排列方向、对齐方式、尺寸分配都可以通过容器的flex相关属性控制
- 可以轻松实现垂直居中、等分布局、自适应布局等效果
以下是flex属性的使用示例：
/* 实现容器内的子元素水平垂直居中 */
.container {
display: flex;
justify-content: center; /* 主轴对齐方式：居中 */
align-items: center; /* 交叉轴对齐方式：居中 */
width: 500px;
height: 300px;
background-color: #f5f5f5;
}
.item {
width: 100px;
height: 100px;
background-color: #ff7875;
}
5. grid（网格布局容器）
设置display: grid的元素会成为网格布局容器，它将容器划分为一个个网格，子元素可以指定放在哪个网格中，适合实现复杂的二维布局：
- 可以自定义网格的行数、列数、行高、列宽
- 子元素可以通过grid-row和grid-column属性指定占据的网格区域
- 常用于实现卡片网格、后台管理系统布局等场景
以下是grid属性的使用示例：
/* 实现3列等宽的网格布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列，每列等宽 */
gap: 20px; /* 网格间隙 */
padding: 20px;
background-color: #fafafa;
}
.grid-item {
height: 120px;
background-color: #95de64;
display: flex;
justify-content: center;
align-items: center;
}
6. none（隐藏元素）
设置display: none的元素不会生成任何显示框，元素不会在页面中渲染，也不会占据页面空间，和visibility: hidden的区别是后者只是隐藏元素内容，元素本身仍会占据原来的空间。
以下是none属性的使用示例：
/* 隐藏类名为hidden的元素 */
.hidden {
display: none;
}
常见display属性值对比
为了更清晰地区分各个属性值的特性，我们可以通过表格进行对比：
| 属性值 | 是否独占一行 | 可设置宽高 | 典型应用场景 |
|---|---|---|---|
| block | 是 | 是 | 容器、段落、标题等 |
| inline | 否 | 否 | 文本内的强调、链接等 |
| inline-block | 否 | 是 | 行内按钮、图标、小尺寸组件 |
| flex | 否（容器特性） | 容器可设置宽高，子元素尺寸由flex规则决定 | 一维布局、弹性对齐场景 |
| grid | 否（容器特性） | 容器可设置宽高，子元素尺寸由网格规则决定 | 二维复杂布局场景 |
| none | 不渲染 | 不生效 | 临时隐藏元素 |
使用display属性的注意事项
- 修改display属性会改变元素的渲染类型，可能会影响原有的布局效果，修改时需要确认对其他元素的影响
- flex和grid布局容器的子元素，部分原有的盒模型特性会失效，比如float属性对flex子项无效
- 如果需要元素隐藏但保留占位空间，不要使用display: none，应该选择visibility: hidden
- 部分旧版本浏览器对grid布局的支持度有限，如果需要兼容旧浏览器，要谨慎使用grid属性
display属性的属性值远不止以上几种，还有table、inline-table、list-item等相对少用的属性值，实际开发中可以根据具体需求选择对应的属性值，优先使用flex和grid等现代布局方案可以大幅提升布局效率。