display:none与visible:hidden的区别

原创 2013年12月03日 23:14:00

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

例子:

<html>
< head>
< title>display:none和visible:hidden的区别</title>
< /head>
< body >
< span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
< span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
< /body>
< /html>

相关文章推荐

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

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

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
  • 232

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

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

visiblity:hidden和display:none的差异

  • 2013年01月25日 15:03
  • 17KB
  • 下载

转载: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

readonly、disabled、display、visible的区别

css
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:display:none与visible:hidden的区别
举报原因:
原因补充:

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