CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢??

参考了stackoverflow的博客,才发现区别如下所示:

Here is a compilation of verified information from the various answers.

Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):

  1. Collapses the space that the element would normally occupy
  2. Responds to events (e.g., click, keypress)
  3. Participates in the taborder
                     collapse events taborder
opacity: 0 No Yes Yes
visibility: hidden No No No
visibility: collapse * No No
display: none Yes No No * Yes inside a table element, otherwise No. ---objects with Visibility:hidden still have shape, they just arent visible. opacity zero elements can still be clicked and react to other events. 小结如下:
1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样 参考:
http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

CSS:opacity:0,visibility:hidden,display:none的区别的更多相关文章

  1. CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...

  2. none,hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  3. CSS学习笔记五:display,position区别

    最近常用css,经常在位置方面使用导display与position这两个属性,所以想要弄清楚它们之间的意思. 一.display 作用是规定元素应该生成的框的类型.意思是定义建立布局时元素生成的显示 ...

  4. css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  5. visibility和display的异同

    都有隐藏节点的作用. visibility:hidden; display:none; (1)visibility 规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的 ...

  6. visibility,display区别

    visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失

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

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

  8. display: none;、visibility: hidden、opacity=0区别总结

    display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.disp ...

  9. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

随机推荐

  1. 实用的DDos攻击工具

    来源: http://www.safecdn.cn/linux/2018/12/ddos/95.html ‎ 特别提示:仅用于攻防演练及教学测试用途,禁止非法使用 Hyenae 是在windows平台 ...

  2. WIN10下VS CODE 更新后拓展宿主意外终止问题解决方法(每次系统更新都要删除一次git)

    S CODE最近更新后,一打开就会出现拓展宿主意外终止的错误,点重新加载等都不好用. 出现这个问题主要是和git有关,做如下操作处理就好: 打开vscode安装文件夹->resource文件夹- ...

  3. AspxGridView服务器事件列表

    2.AutoFilterCellEditorCreate (1)语法:publicdelegate void ASPxGridViewEditorCreateEventHandler(object s ...

  4. Swoole 进程管理

    用法: $process = new swoole_process(function(){ //这里写业务代码 },true) //开启进程,返回进程pid $pid = $process->s ...

  5. oracle基础 管理索引

    转自:https://blog.csdn.net/without_bont/article/details/79862112 管理索引   ---    原理介绍 索引是用于加速数据存取的数据对象.合 ...

  6. django日志配置

    直接参考这篇,很详细:https://www.cnblogs.com/changqing8023/p/9639769.html 补充一点:日志文件打开时,中文乱码,要在handler中设置编码格式,' ...

  7. Excel和Word 简易工具类,JEasyPoi 2.1.7 版本发布

    JEasyPOI 简介 EasyPOI 功能如同名字easy,追求的就是简易,让一个没接触过poi的人员,可以傻瓜化的快速实现Excel导入导出.Word模板导出,可以仅仅5行代码就可以完成Excel ...

  8. day25-面向对象结构与成员

    1.面向对象结构分析 如下面的图所示:面向对象整体大致分两块区域: 每个大区域又可以分为多个小部分: class A: name = 'Tom' # 静态变量(静态字段) __iphone = '13 ...

  9. UNITY2018.3 在editor下运行时new memoryprofiler显示 shader占用内存很大的问题在安卓上并没有看到

    在安卓机上完全看不到shader占用的内存,但问题是,shader在安卓上真的几乎不占用内存了?(我们的游戏中只使用了mobile下的shader) 参考下面这个文章,说是真机上也有: Unity3D ...

  10. SED命令用法整理

    sed '/Started/'q  匹配到Started字符串则退出sed命令 sed '/Started/{/in/q}'  同时匹配到Started和in两个字符时则退出sed命令 ------- ...