display属性通过设置不同值控制元素显示类型和是否显示。1. display: none使元素完全消失且不占空间，display: block或inline可恢复显示；2. 可改变元素显示类型，如block、inline、inline-block、flex、grid，用于布局调整；3. 结合JavaScript动态修改display值或切换预定义类（如.hidden）实现显示隐藏交互；4. 与visibility: hidden不同，后者元素仍占位。display是布局和显示控制的核心属性。
在CSS中，display 属性是控制元素布局和是否显示的核心方式之一。通过设置不同的 display 值，可以改变元素的显示类型，甚至让元素不显示。下面介绍几种常见的用法。
1. 控制元素是否显示
使用 display: none 可以让元素完全从页面布局中消失，不占据任何空间。
示例：div { display: none; }
这会让该 div 及其内容不可见，也不影响其他元素的排布。
立即学习“前端免费学习笔记（深入）”；
要让元素正常显示，使用：
div { display: block; } 或 display: inline; 等具体类型。
2. 改变元素的显示类型
display 还能改变元素原本的显示方式，常用值包括：
- block：块级元素，独占一行（如 div、h1）
- inline：行内元素，与其他行内元素同行显示（如 span、a）
- inline-block：行内块元素，同行显示但可设置宽高
- flex：启用弹性布局，方便对齐子元素
- grid：启用网格布局，适合复杂结构
把链接变成块级元素：
a { display: block; }
这能让整个链接区域更容易点击，常用于导航菜单。
3. 隐藏与显示切换（配合JavaScript）
实际开发中，常通过 JavaScript 动态修改 display 值来实现显示/隐藏效果。
比如：
document.getElementById("box").style.display = "none"; // 隐藏document.getElementById("box").style.display = "block"; // 显示
也可以预先定义 CSS 类：
.hidden { display: none; }
再用 JS 添加或移除该类来控制显示状态。
4. 注意与 visibility 的区别
display: none 和 visibility: hidden 不一样：
- display: none —— 元素彻底消失，不占空间
- visibility: hidden —— 元素看不见，但仍占据原来位置
基本上就这些。display 是最直接有效的控制元素显示方式的属性，灵活使用能实现各种布局和交互效果。
