如何通过css设置元素显示隐藏display与visibility_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-21

浏览次数：次

display与visibility均可隐藏元素，但display: none不占空间且触发重排，visibility: hidden保留空间仅不可见，适用于布局稳定或动画场景。

如何通过css设置元素显示隐藏display与visibility

在CSS中，控制元素的显示与隐藏主要有两种方式：display 和 visibility。虽然它们都能让元素“看不见”，但作用机制和效果不同，使用时需根据实际需求选择。

display 属性用于定义元素的布局方式，同时也常用来彻底显示或隐藏元素。

常见取值：

当设置为 display: none; 时，元素从文档流中移除，其原本占据的空间也会被释放，页面会重新布局。

示例：

div {
  display: none; /* 元素隐藏，不占空间 */
}

visibility 属性用于控制元素是否可见，但不影响布局。

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

立即学习“前端免费学习笔记（深入）”；

常见取值：

与 display 不同，visibility: hidden; 只是让元素“看不见”，但它依然存在于页面中，会影响布局，周围元素不会向它位置移动。

示例：

span {
  visibility: hidden; /* 元素隐藏，但保留空间 */
}

空间占用：display: none 完全移除元素；visibility: hidden 保留空间
重排与重绘：display 会触发页面重排（reflow）；visibility 通常只触发重绘（repaint）
子元素影响：display: none 会使所有子元素不可见且不渲染；visibility: hidden 的子元素可通过设置 visibility: visible 恢复显示
动画支持：visibility 支持过渡动画（如配合 opacity），display 不支持过渡