一、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. DDoS攻击的几种类型

    DDoS攻击的几种类型   随着网络攻击的简单化,如今DDoS攻击已经不止出现在大型网站中,就连很多中小型网站甚至是个人网站往往都可能面临着被DDoS攻击的的风险.或许很多站长对DDoS攻击并不是很了 ...

  2. 【学习笔记】adb命令

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

  3. typeScript入门配置

    typeScript是有微软开发的一款开源的编程语言. TypeScript是JavaScript的一个超集,从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始.可以使用现有的Java ...

  4. Flash-aware Page Replacement Algorithm

    1.Abstract:(1)字体太乱,单词中有空格(2) FAPRA此名词第一出现时应有“ FAPRA(Flash-aware Page Replacement Algorithm)”说明. 2.in ...

  5. 阿里云服务器挖矿脚本bioset攻击解决

    1.问题出现 一大早刚起床,阿里云就给我发了一条短信,提醒我服务器出现紧急安全事件:挖矿程序 阿里云“贴心”地提供了解决方法,不过需要购买企业版的安全服务,本着能自己动手就不花钱原则自己搞了起来 于是 ...

  6. phpmyadmin出现空密码登录被禁止 (参见 允许空密码)的解决办法

    在Windows或者Linux下mysql安装后默认的密码为空,又当我们又安装了mysql的管理工具phpmyadmin后登陆时出现“空密码登陆呗禁止(参见允许密码为空)”.不能登录成功        ...

  7. Java后端技术面试汇总(第五套)

    1.Java相关 • 乐观悲观锁的设计,如何保证原子性,解决的问题:• char和double的字节,以及在内存的分布是怎样:• 对象内存布局,然后讲下对象的死亡过程?• 对象头,详细讲下:• syn ...

  8. python：map 函数

    map(func, *iterables) --> map object map()是 Python 内置的高阶函数,它接收一个函数 func 和一个 list(*iterables),并通过把 ...

  9. qt webengineview 设置背景颜色

    当使用qwebengineview加载网页的使用,可以通过网页端的css设置网页的显示效果 但是当窗口大小改变的时候,你会发现网页的resize速度赶不上窗口的resize速度,这是会出现白色空白,而 ...

  10. Django实现websocket完成实时通讯

    一 什么是Websocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebS ...