display:none | visibility:hidden 的区别

转载 2015年07月07日 08:49:23
  1. <html>  
  2. <head>  
  3.     <meta name="viewport" content="width=device-width" />  
  4.     <title>Index4</title>  
  5. </head>  
  6. <body>  
  7.     <div>  
  8.         <!--display:none是隐藏元素,隐藏后它并不会再占用之前所占的区域(也就是说,连它自己的位置都隐藏掉了)-->  
  9.         <div style="display:none">小苹果</div>  
  10.   
  11.         <!--visibility:hidden是隐藏元素,隐藏后,它还会占用之前所占的区域(也就是说仅仅是隐藏它自己的外观,并不会隐藏自己的位置)-->  
  12.         <div style="visibility:hidden">圣女果</div>  
  13.     </div>  
  14. </body>  
  15. </html>  

相关文章推荐

visibility:hidden和display:none的区别

今天在实现一个隐藏功能的时候用了display:none,后来发现它占据的地方居然没了就用了visibility:hidden;后来自己测试了一下,这两个果真是有区别的。 接着看图: visi...

display:none和visibility:hidden的区别

display:none和visibility:hidden 目前,我所知道的不同有三点(欢迎补充): 1.空间占据 2.回流与渲染 3.株连性 display:none隐藏产生ref...
  • DreamFJ
  • DreamFJ
  • 2017年04月12日 09:18
  • 229

CSS: display:none和visibility:hidden的区别

今天要写一个js遮盖层的插件,在设置CSS的时候,使用了visibility:hidden的这个属性,发现,并没有达到一开始就隐藏,点击的时候唤醒的这个功能,于是就去网上查了下,发现应该用displa...

display:none;与visibility:hidden;的区别

如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素, 但它的位置不能被占了,...
  • henulwj
  • henulwj
  • 2012年07月20日 08:32
  • 9918

转载:css元素隐藏原理及display:none和visibility:hidden

原文链接css元素隐藏原理及display:none和visibility:hidden 一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;...

为什么要用visibility:hidden;代替display:none;?

为什么要用用visibility:hidden;代替display:none;?因为后者

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

在CSS中,让元素隐藏指屏幕范围内肉眼不可见的方法很多,只不过有的依然保留空间,而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理,感兴趣的你可不要错过了哈 一、CSS元素隐藏 在C...

再谈visibility:hidden和display:none

之前写过一篇有关visibility:hidden和display:none的wenzha

display:none/block的应用以及和visibility的区别,隐藏/显示内容

display:none/block; visibility:hidden/visible;

css中display/visibility和html中hidden的区别

用法:显示 隐藏不占位显示 隐藏占位显示 消失不占位或者
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:display:none | visibility:hidden 的区别
举报原因:
原因补充:

(最多只允许输入30个字)