Display和Visibility的区别,你了解了吗?
创始人
2025-07-07 09:51:03
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

默认值


相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...