Display和Visibility的区别,你了解了吗?

开发 前端
当元素样式设置为display:none时,则该元素和它的子元素都会隐藏,不占据文档流(就是元素原本占据的空间会释放出来)。

采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。

元素样式设置为display:none

当元素样式设置为display:none时,则该元素和它的子元素都会隐藏,不占据文档流(就是元素原本占据的空间会释放出来)。

给元素样式设置display:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

样式设置为

.a,.b,.c{
  width:50px;
  height:50px;
  text-align:center;
  background:blue;
  margin-top:5px;
  line-height:50px;
  color:red;
}

效果如:

图片图片

添加display:none后效果如下:

图片图片

B原本占据的空间会释放出来。

display的其他常见属性值及说明

属性值

说明

block

元素转化为块级元素显示

inline

元素转化为行内元素显示

inline-block

自身元素转化为行内元素,相邻的行内元素显示在一行,但其子元素为块级元素显示

元素样式设置为:visibility:hidden

visibility:hidden也可以将元素隐藏,但是依然显示着元素所占据的空间。如:

给元素样式设置visibility:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

css样式

.a,.b,.c{
  width:50px;
  height:50px;
  text-align:center;
  background:blue;
  margin-top:5px;
  line-height:50px;
  color:red;
}
.b{
  visibility:hidden;
}

效果如下:

图片图片

visibility的其他属性值:

属性值

说明

inherit

继承父元素的visibility属性设置

visible

默认值


责任编辑:武晓燕 来源: 读心悦
相关推荐

2010-09-16 09:58:44

CSS display

2023-10-26 07:09:30

Golangrune字符

2024-03-20 08:31:40

KotlinExtension计算

2023-11-06 17:37:17

技术架构任务队列

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2022-10-24 08:45:23

数据库应用场景区块链

2023-06-26 07:32:43

Kubernetes容器

2023-05-09 09:00:20

版本Canary框架

2023-09-27 16:29:55

开发团队信息

2024-01-03 08:08:51

Pulsar版本数据

2010-09-07 16:21:37

CSSDisplayVisibility

2024-02-19 08:40:22

2023-12-14 12:55:41

Pythondel语句

2010-09-16 10:29:47

DisplayVisibilityCSS

2023-10-12 16:39:00

2022-07-18 09:41:29

属性类型安全Spring

2010-09-14 13:11:43

DIVdisplayvisibility

2023-05-15 08:16:33

Google I/OWeb平台

2010-08-29 21:09:57

DHCP协议

2023-09-27 07:35:27

点赞
收藏

51CTO技术栈公众号