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无 ...
随机推荐
- linux学习(一)-----vm、centos安装
安装vm和Centos 1)先安装 virtual machine ,vm12 2)再安装 Linux (CentOS 6.8) 3)原理示意图,这里我们画图说明一下 VM 和 CentOS 的关系. ...
- 微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...
- IO流19(完) --- RandomAccessFile实现数据的插入 --- 技术搬运工(尚硅谷)
原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...
- 文件内容操作命令 cat、more、less、head、tail、wc、grep 命令详情
文件内容操作命令 cat.more.less.head.tail.wc.grep 命令详情 1) cat命令 用途:显示出文件的全部内容 格式:cat 目标文件 例: ...
- Ionic JPush极光推送 插件实例
1.需要去这里注册https://www.jiguang.cn 注册成功获取AppKey 备注填写应用包名规范点,在项目还要用那 2.创建ionic 项目 指定你注册时候的包名(假如:com.ioni ...
- line-height:150%/1.5em与line-height:1.5的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- zabbix自定义监控redis
zabbix监控redis脚本 #!/bin/bash #此脚本用来获取redis-cli info信息 redis_cli="/usr/local/redis/bin/redis-cli& ...
- mysql 主从复制 配置
mysql 的 默认配置文件在 /etc/my.cnf 1 修改主库 配置文件: 设置 服务id,并且开启二进制日志文件. server-id=1 log-bin=mysql-bin 2重启服务:se ...
- OpenLayers使用symbolizers样式特征
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- Constructing Roads POJ - 2421 (最小生成树)
思路:首先使用二维数组dis[][]处理输入, 对于已经修好的路,将其对应的dis[i][j]置为零即可.最后再将 所有的dis[][]保存到边结构体中,使用Kruskal算法求得最小生成树. ...