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区别总结的更多相关文章

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

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

  2. CSS隐藏元素 display、visibility、opacity的区别

    关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...

  3. hidden="hidden",display:none, visibility:hidden 三者的区别

    三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...

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

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

  5. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

  6. display:none,overflow:hidden,visibility:hidden之间的区别

    一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...

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

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

  8. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题

    此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hid ...

  9. 基础总结(04)-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

随机推荐

  1. linux学习(一)-----vm、centos安装

    安装vm和Centos 1)先安装 virtual machine ,vm12 2)再安装 Linux (CentOS 6.8) 3)原理示意图,这里我们画图说明一下 VM 和 CentOS 的关系. ...

  2. 微信小程序上传图片(附后端代码)

    几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...

  3. IO流19(完) --- RandomAccessFile实现数据的插入 --- 技术搬运工(尚硅谷)

    原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...

  4. 文件内容操作命令 cat、more、less、head、tail、wc、grep 命令详情

      文件内容操作命令 cat.more.less.head.tail.wc.grep 命令详情 1)        cat命令   用途:显示出文件的全部内容   格式:cat 目标文件   例:   ...

  5. Ionic JPush极光推送 插件实例

    1.需要去这里注册https://www.jiguang.cn 注册成功获取AppKey 备注填写应用包名规范点,在项目还要用那 2.创建ionic 项目 指定你注册时候的包名(假如:com.ioni ...

  6. line-height:150%/1.5em与line-height:1.5的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. zabbix自定义监控redis

    zabbix监控redis脚本 #!/bin/bash #此脚本用来获取redis-cli info信息 redis_cli="/usr/local/redis/bin/redis-cli& ...

  8. mysql 主从复制 配置

    mysql 的 默认配置文件在 /etc/my.cnf 1 修改主库 配置文件: 设置 服务id,并且开启二进制日志文件. server-id=1 log-bin=mysql-bin 2重启服务:se ...

  9. OpenLayers使用symbolizers样式特征

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  10. Constructing Roads POJ - 2421 (最小生成树)

    思路:首先使用二维数组dis[][]处理输入, 对于已经修好的路,将其对应的dis[i][j]置为零即可.最后再将    所有的dis[][]保存到边结构体中,使用Kruskal算法求得最小生成树. ...