一、display:none和visibility:hidden的区别

1.1 空间占据

1.2 回流和渲染

1.3 株连性

二、空间占据

display:none 隐藏后的元素不占据任何空间，而 visibility:hidden 隐藏的元素空间依旧存在。

三、回流和渲染

display:none 隐藏产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。

三、株连性

display:none 就是“株连性”明显的声明：一旦父节点元素应用了 display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

四、隐藏失效

若子孙元素应用了 visibility:visible，则这个子孙元素不但不会隐藏，而且会显现出来。

Code

Example

阅读更多

前端面试题-display:none和visibility:hidden的区别的更多相关文章

  1. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  2. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  3. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

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

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  5. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  6. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  7. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  8. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  9. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

随机推荐

  1. 【学习笔记】adb命令

    1.adb connect 连接设备 如:adb connect 127.0.0.1:62001 连接夜神模拟器\adb connect 127.0.0.1:21503 链接逍遥模拟器 adb con ...

  2. TCP/IP中32位IP地址与字符串转化

    转载:http://www.cnitblog.com/wujian-IT/archive/2007/10/11/34739.aspx 在网络上面我们用的IP都是数字加点(192.168.0.1)构成的 ...

  3. C++四种类型转换总结

    C风格的强制类型转换很简单,均用 Type b = (Type)a 形式转换.C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用,如下表: 转换类型操作符 作用 const_cast 去 ...

  4. 在PostgreSQL中 pg_start_backup 做了什么?

    # 在PostgreSQL中 pg_start_backup 做了什么?HM 2019-07-30 ## pg_start_backup 做一个备份开始标记,还做了一些其他的操作,下面进行探寻. * ...

  5. C++拷贝构造函数：浅拷贝与深拷贝

    在介绍C++浅拷贝与深拷贝之前,我们先引出C++的拷贝构造函数. C++拷贝构造函数是一种特殊的构造函数,其形参是本类对象的引用.用于在建立一个新的对象时,使用一个已经存在的对象来初始化这个新对象.因 ...

  6. mysql-1.1基础

    笔记内容:mysql基础,创建数据库,创建表,操作数据表,操作数据,简单查询,条件查询,排序,分组,聚合,连接查询(等值连接,内连接,外链接),子查询 自己提示:脑图笔记存于网盘中  右键:新标签页打 ...

  7. oracle 安装后参数调整

    关闭11g 新特性 开归档 oracle 11g安装完成需修改:1.关闭审计alter system set audit_trail=none scope=spfile sid='*'; 防止ORA- ...

  8. computed、watch、methods的区别

    computed:计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代 ...

  9. colaui基础

    监控 c-watch // 监控的方法函数 on 监控的参数名字 div(c-watch="fun on style" c-bind="styles") // ...

  10. python time，calendar，datetime

    time sleep:休眠指定的秒数(可以是小数) localtime:将一个时间戳转换为time.struct_time类型的对象(类似于元组) # 将一个时间戳转换为一个类似于元组的对象,不指定时 ...