在css中如何用display控制元素显示

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; }

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

这能让整个链接区域更容易点击，常用于导航菜单。

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 是最直接有效的控制元素显示方式的属性，灵活使用能实现各种布局和交互效果。

以上就是在css中如何用display控制元素显示的详细内容，更多请关注php中文网其它相关文章！