What is the difference between visibility:hidden and display:none?

答案1

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

Notes:

It's important to keep css-transitions into mind when talking about visibility vs. display. For example, toggling from visibility: hidden; to visibility: visible; allows for css-transitions to be used, whereas toggling from display: none; to display: block; does not. visibility: hidden has the additional benefit of not capturing javascript events, whereas opacity: 0; captures events.

答案2

They are not synonyms同义词.

display:none removes the element from the normal flow of the page, allowing other elements to fill in.

visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

What is the difference between visibility:hidden and display:none?的更多相关文章

  1. 再谈visibility:hidden和display:none

    之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...

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

    为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...

  3. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  4. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

  5. visibility: hidden 和 display: none的区别

    相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...

  6. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

  7. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

    总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...

  8. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  9. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

随机推荐

  1. Unity shader学习之逐像素漫反射光照模型

    shader如下: Shader "Custom/Diffuse Fragment-Level" { Properties { _Diffuse (,,,) } SubShader ...

  2. awk命令学习(1)

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  3. cocos v3.10 下载地址

    官方给出的是在:http://www.cocos2d-x.org/filedown/CocosForWin-v3.10.exe如果下载不了,可以在这里下http://cdn.cocos2d-x.org ...

  4. 解决 samba 服务器 windows 多重连接

    samba连接,用户名密码均正确.失败提示:不允许一个用户使用一个以上用户名与一个服务器或共享资源的多重连接. 事实上,这个不是samba的限制.是Windows的限制. 在打开存在public = ...

  5. Spring boot 问题总结

    1. Spring boot 嵌入的tomcat不能启动: Unregistering JMX-exposed beans on shutdown   在官网(http://start.spring. ...

  6. 禁用HTTP.sys,导致80端口被禁用和IIS服务无法启动解决办法

    由于端口被占用,使用 win+r 运行 cmd 输入netstat -ano 可以看到端口被PIF 4占用,可以找到对应的进程NT kernel& System 该进程是Http.sys,是h ...

  7. vc709时钟信号报单端信号错误的记录

    话说,为什么我又要跑去搞fpga玩了,不是应该招个有经验的开发人员么?大概是练度不够吧…… Xilinx这个板子阿,真鸡儿贵,我这还没啥基础,慢慢试吧: 看了乱七八糟各种文档先不提,我还是决定先控制L ...

  8. Linux基础命令---杀死进程pkill

    pkill pkill可以给指定的进程发送信息,它可以结束某个执行的进程或者目录登录的用户. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedo ...

  9. 安装PG3.0详细教程附图

    从公司要求开始着手调研PG到今天上午都还不知道如何安装PG.. 囧的离谱.. 看了半天的PG官网 就这个网页我瞅了半天..对你没看错 半天 少说有10分钟..原谅我的英文不是非常好..但是我知道什么意 ...

  10. winscp中使用sudo的方法

    用截图了解如何在 WinSCP 中使用 sudo. 首先你需要检查你尝试使用 WinSCP 连接的 sftp 服务器的二进制文件的位置.你可以使用以下命令检查 SFTP 服务器二进制文件位置: [ro ...