display属性决定元素布局方式，常用值包括：1. block用于独占一行的块级布局；2. inline实现文本内同行显示；3. inline-block兼具行内与块特性，可设宽高且同行排列；4. none使元素不渲染并脱离文档流；5. flex实现一维弹性布局，适用于导航与居中；6. grid支持二维网格布局，适合复杂页面结构；7. table类值模拟表格样式，用于对齐或等高布局；8. contents隐藏容器只渲染子元素；9. list-item实现列表项目效果；10. run-in根据上下文切换显示类型（少用）。合理选用可提升布局效率。
display 属性是 CSS 中控制元素布局行为的核心属性，它决定了元素在页面中的显示方式和盒模型类型。以下是常见的 display 值及其使用场景：
1. block（块级元素）
将元素显示为块级元素，独占一行，可以设置宽度、高度、内外边距。
常见使用场景：- 用于构建结构化布局，如
<div>、<p>、<h1>-<h6> - 需要独占一行并自定义尺寸的容器
- 将内联元素转换为可设置宽高的块级元素
2. inline（内联元素）
元素在同一行内显示，不独占行，宽度和高度由内容决定，不能直接设置宽高。
常见使用场景：- 文本内的元素，如
<span>、<a>、<strong> - 希望多个元素水平排列且不换行
- 不影响原有流式布局的小样式包裹
3. inline-block
兼具 inline 和 block 特性：同行显示，但可设置宽高和边距。
立即学习“前端免费学习笔记（深入）”；
常见使用场景：- 实现水平排列的按钮组或导航项
- 图片与文字对齐控制
- 替代 float 实现简单布局（如商品列表）
4. none
元素完全不显示，且不占据文档流空间。
常见使用场景：- 配合 JavaScript 动态显示/隐藏元素
- 响应式设计中不同屏幕下隐藏某些模块
- 条件性展示内容（如登录后才显示的菜单）
5. flex
启用弹性盒子布局，让子元素灵活分配父容器空间。
- 一维布局：导航栏、居中对齐、等高列
- 响应式组件排列
- 取代传统浮动布局
6. grid
启用网格布局，支持二维（行和列）的复杂布局控制。
常见使用场景：- 页面整体布局（头部、侧边栏、主内容区）
- 卡片式布局、仪表盘界面
- 需要精确对齐和跨行跨列的场景
7. table / table-row / table-cell 等
模拟 HTML 表格的显示行为，无需使用 <table> 标签也能实现表格样式。
8. contents
使元素本身不渲染，只渲染其子元素，仿佛该元素不存在于渲染树中。
常见使用场景：- 去除包装标签的视觉影响（如无样式的
<div>） - 提升语义结构又不影响布局
- 与 Grid/Flex 结合避免多余容器干扰
9. list-item
像 <li> 一样显示，包含块级内容和项目符号。
- 自定义列表样式时保持原有列表行为
- 非
<ul>/<ol>元素实现列表效果
10. run-in
根据上下文决定是内联还是块级（较少使用，兼容性差）。
注意：现代开发中基本不用，主要用于特殊排版需求。其他值（了解即可）
-
inline-flex：内联弹性容器，常用于按钮组嵌入文本流 -
inline-grid：内联网格容器 -
initial/inherit/unset：重置或继承 display 值
