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

2023年 11月 27日 56.6k 0

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

元素样式设置为display:none

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

给元素样式设置display:none
A
B
C

样式设置为

.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
A
B
C

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

默认值

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论