display: none;、visibility: hidden、opacity=0区别总结
display: none;
1、浏览器不会生成属性为display: none;的元素。
2、display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排。
3、display: none;不会被子类继承,但是···子类是不会显示的,毕竟都一起被kill啦。
4、display,是个尴尬的属性,transition对她无效。(毫无争议)
visibility: hidden;
1、元素会被隐藏,但是不会消失,依然占据空间。
2、visibility: hidden会被子类继承,子类也可以通过显示的设置visibility: visible;来反隐藏。
3、visibility: hidden;不会触发该元素已经绑定的事件。
4、visibility: hidden;动态修改此属性会引起重绘。
5、visibility,transition对她无效。(亲测)
opacity=0
1、opacity=0只是透明度为100%,元素隐藏,依然占据空间。
2、opacity=0会被子元素继承,且,子元素并不能通过opacity=1,进行反隐藏。不能。
3、opacity=0的元素依然能触发已经绑定的事件。
4、opacity,transition对她有效(毫无争议)
摘自:http://blog.csdn.net/WRian_Ban/article/details/51958195
display: none;、visibility: hidden、opacity=0区别总结的更多相关文章
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
- CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...
- hidden="hidden",display:none, visibility:hidden 三者的区别
三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...
- css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
- 两种隐藏元素方式【display: none】和【visibility: hidden】的区别
此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...
- display:none,overflow:hidden,visibility:hidden之间的区别
一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...
- display:none和visibility:hidden两者的区别
display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...
- 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题
此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hid ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
随机推荐
- mysql基础教程(二)-----分组函数、多表查询、常见函数
分组函数 什么是分组函数 分组函数作用于一组数据,并对一组数据返回一个值. 组函数类型 • AVG() • COUNT() • MAX() • MIN() • SUM() 组函数语法 AVG(平均值) ...
- VS2010中Cocos2d-x中文乱码问题
不罗嗦,直接进入主题,VS2010的默认编码是"GB2312",那么以创建一个label为例,当我们使用 CCLabelTTF::create(const char *label, ...
- 封装原生JavaScript的ajax
function obj2str(data) { data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTi ...
- jquery同级遍历
siblings() 返回被选元素的所有同胞元素. next() 返回被选元素的下一个同胞元素. nextAll() 方法返回被选元素的所有跟随的同胞元素. nextUntil() 方法返回介于两个给 ...
- Scrapy下载器中间件实现随机请求头和代理ip
一.设置随机请求头 class UAMiddleWare(object): UA_LIST = [ 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; ...
- create_pascal_tf_record.py 生成的record一直为0字节
后面发现这个错误原来是自己Main目录下的train.txt中间没东西
- 警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' did not find a matching property.
警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' d ...
- npm 安装删除模块
npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录: [npm install -g xxx]利用npm安装全局模块xxx: 本地安装时将模块写入pac ...
- less基础引用
1.介绍: Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏 ...
- [转]深入理解ajax系列——响应编码
我们接收到的 ajax 响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示 XML文档的Document ...