在CSS中，display属性决定了元素在页面中的生成盒类型以及布局行为。通过合理地设置display，我们可以控制元素是独占一行还是与其他内容并排，也能快速实现复杂的响应式排列。理解不同显示方式之间的差异，是写好页面布局的基础。
常见的display取值
最常用的几种display值包括block、inline、inline-block和flex。block元素会占满可用宽度并换行，比如<div>默认就是块级。inline元素不换行且宽度由内容决定，例如<span>。inline-block结合了两者特点，既能设置宽高又能并排显示。flex则用于弹性布局，适合一维排列场景。
block与inline对比
| 取值 | 是否换行 | 可设宽高 | 典型标签 |
|---|---|---|---|
| block | 是 | 是 | div, p, h2 |
| inline | 否 | 否 | span, a, em |
| inline-block | 否 | 是 | 自定义按钮 |
如何使用display调整布局
我们可以通过给容器设置display:flex来让子元素横向排列，而不再依赖浮动。下面的例子展示了将导航项从竖排改为横排：
/* 默认竖排的导航 */
.nav > li {
display: block;
}
/* 改为弹性横排 */
.nav {
display: flex;
list-style: none;
padding: 0;
}
.nav > li {
display: inline-block;
margin-right: 12px;
}
隐藏元素的方式
当我们需要临时移除某个元素但保留结构时，可以使用display:none。这与visibility:hidden不同，后者仅隐藏内容但仍占据空间。示例代码如下：
<style>
.hidden {
display: none;
}
</style>
<div class="hidden">这段文字不会显示也不会占空间</div>
实际开发建议
在写布局时，优先使用flex或grid来替代老旧的浮动方案。如果只需控制行内元素的间距与大小，inline-block是不错的选择。注意在切换display值时，元素原有的margin和padding表现可能变化，应在浏览器中实测。
合理运用display属性，可以用更少的代码实现更清晰的版面结构。
总之，掌握CSS中display的各种设置方式，能让你在面对不同布局需求时从容选择，减少兼容性问题，写出更易维护的样式文件。