display不同值的作用及其应用场景CSS 的 display 属性用于定义元素的显示类型和布局行为，是控制页面布局的

CSS 的 display 属性用于定义元素的显示类型和布局行为，是控制页面布局的核心属性之一。其取值丰富，不同值对应完全不同的渲染规则，以下是常用的 display 值及作用：

display: block（块级元素）
- 特点：元素独占一行，宽度默认占满父容器，可设置 width、height、margin、padding 等盒模型属性。
- 适用场景：用于构建页面结构（如容器、标题、段落）。
- 示例元素：<div>、<p>、<h1>-<h6>、<ul>、<li> 等默认为此类型。
```
.box { display: block; }
```
display: inline（行内元素）
- 特点：元素不独占一行，与其他行内元素并排显示；宽度和高度由内容决定，无法设置 width、height；水平方向的 margin 和 padding 有效，垂直方向无效（不影响布局）。
- 适用场景：用于包裹文本片段（如链接、强调文本）。
- 示例元素：<span>、<a>、<strong>、<em> 等默认为此类型。
```
.text { display: inline; }
```
display: inline-block（行内块元素）
- 特点：兼具 inline 和 block 的特性 —— 不独占一行（可与其他行内元素并排），且可设置 width、height、margin、padding 等所有盒模型属性。
- 适用场景：需要在一行内显示且需控制尺寸的元素（如按钮、图标、表单控件）。
- 示例：按钮 <button> 默认接近此类型。
```
.btn { display: inline-block; width: 100px; height: 40px; }
```

display: flex（弹性布局）
- 特点：开启弹性布局，使元素成为 “Flex 容器”，其直接子元素自动成为 “Flex 项目”；通过容器的 justify-content、align-items 等属性可轻松实现对齐、分布等复杂布局。
- 适用场景：几乎所有需要灵活排列的布局（如导航栏、卡片列表、居中对齐），是现代布局的首选方案。
```
.container {
  display: flex;
  justify-content: center; /* 子元素水平居中 */
  align-items: center;     /* 子元素垂直居中 */
}
```
display: grid（网格布局）
- 特点：开启网格布局，使元素成为 “Grid 容器”，通过行列划分网格区域，精确控制子元素的位置和大小（二维布局）。
- 适用场景：复杂的二维布局（如仪表盘、画廊、不规则网格）。
```
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr; /* 3列等宽 */
 gap: 10px; /* 网格间距 */
}
```
display: table 系列（表格布局）

display: none
- 特点：完全隐藏元素，且元素不占据任何页面空间（从渲染树中移除），与 visibility: hidden（隐藏但保留空间）不同。
- 适用场景：动态显示 / 隐藏元素（如弹窗、折叠菜单）。
```
.hidden { display: none; }
```