一、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. 查看自身公网ip的命令

    curl ifconfig.me curl cip.cc curl ipinfo.io

  2. python-Web-项目-svn和git

    SVN概念: >>>本地服务端 >>>服务端: 安装:windows傻瓜式安装 使用: 1 在弹出的右键菜单中选择Create New Repository或者新建 ...

  3. ArcEngine中打开各种数据源（WorkSpace）的连接 （SDE、personal/File、ShapeFile、CAD数据、影像图、影像数据集）

    ArcEngine 可以接受多种数据源.在开发过程中我们使用了如下几种数据源 1.企业数据库(SDE) 企业数据库需要使用SDE来管理,所以需要使用SDE的Workspace来表示连接.在AE接口中, ...

  4. 亚马逊s3存储： aws cli上传工具速度和各文件大小关系探究

    1,背景介绍 公司最近最近统一了存储环境,由ftp文件存储全量转换为ceph存储.有业务组表示以前往ftp文件批量上传30万个文件1.3GB只需要16分钟左右.切换为ceph存储需要1个多小时,也就是 ...

  5. 使用PowerShell 自动创建DFS命名空间服务器

    运行环境:Windows Server 2012 R2 DFS命名空间概述 DFS命名空间 PowerShell脚本命令 Writing PowerShell DFS Scripts: Managin ...

  6. PTA(Basic Level)1006.Sign In and Sign Out

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  7. SSM框架中表单提交出现400错误

    在jsp页面中: 在controller里传递参数: 由于参数sonTime时String类型,要把String类型的时间转换成Date类型的时间,在过程无法自动完成转换故出现400错误,可以使用@D ...

  8. C++常见面试题：

    一.进程和线程的概念和区别 1.进程是系统进行资源调度的基本单位 2.线程是系统进行运算调度(处理器分配{CPU.内存})的基本单位 二.进程间的通信 进程间的通信共有5种: 1.管道 通常指无名管道 ...

  9. CSP-S 2019 杂记

    CSP-S 2019 游记 update 2019.11.18 考完后的第一感受 update 2019.11.24 我校某优秀学子把全SD的选手程序全测了一遍(太狠了,于是就知道了大概的惨淡成绩,大 ...

  10. iView 发布后台管理系统 iview-admin

    简介 iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护.iView Admin 遵 ...