写CSS绕不开display这个属性。页面里有的元素独占一行，有的却能横向排列，有的设置了宽度却毫无反应，这些现象的根源都在display上。它决定了元素生成的盒子类型，直接影响元素如何排布、如何设置尺寸、以及内部内容如何布局。理解了display，很多布局问题都能迎刃而解。
display到底控制什么
简单来说，display决定了元素以什么样的盒子参与布局。浏览器渲染页面时会为每个元素生成一个盒模型，而display就是告诉浏览器：这个盒子是块级的还是行内的，或者采用更现代的弹性、网格布局方式。
块级（block）盒子会独占一行，默认宽度撑满父容器，可以自由设置width、height、margin、padding。行内（inline）盒子则与其他行内元素排在同一行，设置width和height无效，垂直方向的margin也不生效，典型代表就是<span>和<a>标签。这正是新手常见的疑惑来源：给一个链接设置高度没反应，多半是因为它还是行内盒子。
需要说明的是，HTML标签自带的display值只是浏览器默认样式表给的初始值，完全可以通过CSS覆盖。比如把<li>改成行内块，就能做出水平导航栏。
最常用的几个属性值
下面通过一段代码对比几种基础取值的区别：
<style>
.block-demo {
display: block;
width: 200px;
height: 50px;
background: lightblue;
}
.inline-demo {
display: inline;
width: 200px; /* 不生效 */
height: 50px; /* 不生效 */
background: lightcoral;
}
.inline-block-demo {
display: inline-block;
width: 200px;
height: 50px;
background: lightgreen;
}
</style>
<div class="block-demo">块级元素</div>
<span class="inline-demo">行内元素</span>
<span class="inline-demo">行内元素</span>
<span class="inline-block-demo">行内块</span>
<span class="inline-block-demo">行内块</span>inline-block可以理解为两者的结合体：对外表现为行内，能和其他元素并排显示；对内表现为块级，可以设置宽高。做横向排列的卡片、按钮组时非常方便。不过它有一个老问题——行内元素之间的空白符会产生几像素的间隙，解决办法包括把标签写在一行、父元素设置font-size: 0等。
none会让元素彻底从渲染树中移除，不占据任何空间，也无法通过子元素“救回来”。与之容易混淆的是visibility: hidden，后者只是看不见，但仍然占据原来的位置。两者的差异在切换显示时经常被用到。
现代布局：flex与grid
如今实际项目中，display用得最多的场景其实是开启弹性布局和网格布局。给父容器设置display: flex后，子元素会变成弹性项目，可以轻松实现水平垂直居中、等分空间等需求：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
gap: 16px; /* 子项间距 */
height: 300px;
}flex是一维布局，适合在一条轴线上排布元素；grid则是二维布局，可以同时定义行和列，适合构建整体页面骨架：
.layout {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px auto;
gap: 12px;
}两者并不冲突，常见做法是用grid搭建页面结构，用flex处理局部组件内部的排列，配合使用能让布局代码简洁很多。
使用display的几个注意点
第一，display是可以继承覆盖的，但对替换元素要留意。比如<img>本身是行内替换元素，改成block后表现会变化，改之前最好想清楚布局需求。
第二，display: none和visibility: hidden的性能差异。前者会引起重排，后者通常只触发重绘。频繁切换时如果元素结构复杂，用visibility配合opacity过渡体验更流畅；而需要彻底移除交互（比如隐藏的菜单不能被Tab键聚焦）时，display: none更彻底。
第三，flex布局下的子元素如果设置成display: block，块级特性依然生效，但它们作为flex item的身份不变，float和vertical-align对flex子项会失效，这是很多布局“不按预期走”的原因。
总结一下：display决定了元素的布局身份，block独占一行、inline随行排列、inline-block兼具两者、flex和grid负责现代布局。写样式前先想清楚元素该以什么盒子参与排版，能少走很多弯路。
css displaydisplay属性前端布局修改时间：2026-09-13 00:36:28