请选择 进入手机版 | 继续访问电脑版

Discuz站长论坛

 找回密码
 立即注册
查看: 1228|回复: 0

css元素隐藏原理及display:none和visibility:hidden区别

[复制链接]
发表于 2017-5-23 21:54:00 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击,如下所示:
  1. { display: none; /* 不占据空间,无法点击 */ }
  2. /********************************************************************************/
  3. { visibility: hidden; /* 占据空间,无法点击 */ }
  4. /********************************************************************************/
  5. { position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
  6. /********************************************************************************/
  7. { position: relative; top: -999em; /* 占据空间,无法点击 */ }
  8. /********************************************************************************/
  9. { position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
  10. /********************************************************************************/
  11. { height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
  12. /********************************************************************************/
  13. { opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
  14. /********************************************************************************/
  15. { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
复制代码

总结:
display: none:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;
visibility: hidden:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。

最近访问 头像模式 列表模式
回复 马甲回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|网站地图|小黑屋|手机浏览|简洁浏览|展会网|Discuz站长论坛  

GMT+8, 2018-8-22 15:18 , Processed in 0.688731 second(s), 16 queries , Memcache On.

Powered by Discuz! X3.2 Designed by AiLab.CN

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表