display属性决定元素布局方式：block独占一行，inline同行排列，inline-block可设宽高且同行显示，none隐藏元素，flex和grid实现弹性及网格布局。
在CSS中，display 属性是控制元素布局行为的核心工具。它决定了元素如何在页面上显示，以及与其他元素的排列关系。合理使用 display 可以实现从基本文档流到复杂布局的各种效果。
常见display值及其作用
不同 display 值会改变元素的呈现方式：
- block：元素独占一行，可设置宽高，如 div、p、h1-h6
- inline：元素在同一行内排列，不能直接设置宽高，如 span、a
- inline-block：兼具 inline 和 block 特性，同行显示且可设宽高
- none：元素完全隐藏，不占据布局空间
- flex：启用弹性布局，方便对齐和分配子元素空间
- grid：开启网格布局，适合二维结构排版
用display控制显示与隐藏
通过切换 display 的值，可以控制元素是否可见：
display: none; 让元素从页面“消失”，后续元素会填补其位置。这与 visibility: hidden 不同，后者仍保留空间。常用于响应式设计中根据屏幕大小隐藏某些模块。例如，移动端隐藏侧边栏：
立即学习“前端免费学习笔记（深入）”；
aside {
display: none;
}
实现水平排列的几种方式
传统方法中，让多个块级元素同行显示常用以下方式：
- 设置 display: inline-block，适用于菜单项或按钮组
- 使用 float（已逐渐被替代）
- 现代布局推荐用 display: flex，父容器一行代码即可对齐子项
比如创建一个水平导航栏：
.nav {
display: flex;
}
.nav-item {
margin-right: 16px;
}
选择合适的display值优化布局
根据布局需求选择 display 类型能提升开发效率和维护性：
- 简单并列内容用 inline-block
- 整体页面结构用 flex 或 grid
- 需要隐藏元素时用 none，临时不可见可用 opacity 或 visibility
基本上就这些。掌握 display 的各种取值，就能灵活应对大多数网页布局场景。关键是在合适的地方用合适的模式，避免强行用老方法解决本可用新布局轻松完成的任务。
