display是CSS中最基础也最重要的属性之一，它直接决定了元素以什么方式参与页面的布局。很多布局问题的根源，其实都是对display的取值理解不够透彻。本文将全面梳理display的各类取值，并结合实际场景说明它们各自的用途和注意事项。
基础显示类型：block、inline与inline-block
block（块级）是最常见的显示类型之一。设置为display: block的元素会独占一行，宽度默认撑满父容器，并且可以设置宽度、高度、内外边距。常见的块级元素有div、p、h1到h6、ul、li等。块级元素适合用来搭建页面的整体结构，比如页头、内容区、页脚这些大块的版面。
inline（行内）类型的元素不会独占一行，多个行内元素可以排在同一行，其宽高由内容决定，设置width和height无效，垂直方向的margin和padding表现也与块级元素不同。典型的行内元素包括span、a、strong、em等。行内元素适合包裹文字中的小片段内容，比如给一句话中的某个词加颜色或加链接。
inline-block则结合了两者的特点：它像行内元素一样可以和其他元素排在同一行，又像块级元素一样可以设置宽高和完整的内外边距。这个取值在flex布局流行之前，是实现水平导航菜单、图文混排对齐的主力方案。需要注意的是，inline-block元素之间会因为HTML源码中的换行产生空隙，通常可以通过把父元素字号设为0，或者直接去掉标签之间的空白来解决。
.nav-item {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #f0f0f0;
/* 相邻元素间的空白间隙需要额外处理 */
margin-right: -4px;
}
现代布局核心：flex与grid
flex是现代布局中使用频率最高的取值。将一个元素的display设置为flex后，它就成为一个弹性容器，其直接子元素成为弹性项目，可以方便地实现水平或垂直方向上的排列、对齐、等分和自适应伸缩。配合justify-content、align-items、flex-wrap等属性，几乎能覆盖绝大多数一维布局需求，比如导航栏、底部标签栏、卡片列表等。
grid则是二维布局方案，适合同时控制行和列的结构。设置为grid后，可以通过grid-template-columns和grid-template-rows定义网格轨道，再配合gap控制行列间距。像后台管理系统的整体框架、图片瀑布流的规则网格、表单的行列对齐，用grid实现会比嵌套多层flex更加直观。值得一提的是，flex和grid的容器内，子元素的float、vertical-align等属性会失效，这一点在排查样式问题时容易被忽略。
此外还有inline-flex和inline-grid两个变体，它们让容器本身以行内方式参与外部布局，同时内部仍保持弹性或网格布局机制。比如希望几个标签按钮在一行内自动排列、且整体宽度随内容收缩时，inline-flex就非常合适。
/* flex布局：导航栏水平等分 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* grid布局：三列卡片网格 */
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
表格系列与其他特殊取值
display还支持一组表格相关的取值，包括table、table-row、table-cell、table-column等。它们可以让普通元素表现出与table、tr、td相同的行为。在不方便修改HTML结构、又需要表格化对齐的场景下很有用，比如让两个div像单元格一样垂直居中对齐。不过随着flex的普及，table系取值的使用场景已经明显减少。
list-item会让元素表现为列表项，自带标记盒子，li元素的默认display值就是它。contents是一个比较特殊的取值，设置后元素本身的盒子会消失，其子元素直接参与父级布局，常用于在不改变DOM结构的前提下让子元素成为flex或grid的直接参与者，在React等组件化框架中处理包装组件时特别实用。
none则是最彻底的隐藏方式。设置为display: none的元素不生成任何盒子，不占据空间，也无法响应事件。它常与visibility: hidden、opacity: 0形成对比：visibility: hidden保留了占位但不可见，opacity: 0视觉透明但仍可交互。需要触发重排的隐藏用none，需要保留布局占位或做过渡动画时则选后两者。
/* 用contents消除包装层，让子元素直接参与grid布局 */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.wrapper {
display: contents; /* wrapper本身不产生盒子 */
}
/* 三种隐藏方式对比 */
.hide-none { display: none; } /* 不占空间，触发重排 */
.hide-vis { visibility: hidden; } /* 占空间，不可交互 */
.hide-op { opacity: 0; } /* 占空间，可交互，可做过渡 */
如何在实际项目中选择合适的display取值
选择display值的关键是先明确布局需求属于一维还是二维。如果只是单行或单列的排列与对齐，优先考虑flex；如果需要行和列同时受控，或者希望元素按规则网格自动流动，grid更合适。传统文档流场景下，块级内容用block，文字片段用inline，需要同行排列且控制尺寸的小模块则用inline-block。
还要注意响应式场景下的切换技巧。常见的做法是在移动端让元素以block堆叠显示，在桌面端通过媒体查询切换为flex实现横排，这样只需改动一个属性就能改变整个布局方向。对于隐藏交互组件（如弹窗、下拉菜单），建议统一用display: none配合类名切换来控制，避免用内联样式造成维护困难。
最后提醒一点，display的某些取值组合会影响元素的语义和行为，比如把a标签设置为flex是合法且常用的做法，但把表单控件的display改成table-cell这类非常规值，可能导致不同浏览器表现不一致。遵循常规、语义优先，才能让布局代码既好写又好维护。