一、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. 【ABAP系列】【第六篇】SAP ABAP7.50 之隐式增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列][第六篇]SAP ABAP7.5 ...

  2. Linux手册页惯用的节名

    节 大写 描述 name NAME 显示命令名和一段简短的描述 synopsis SYNOPSIS 命令的语法 confi guration CONFI GURATION 命令配置信息 descrip ...

  3. C++学习笔记-static

    static做为关键字,在C++语言中运用在类中,代表着这个属性或者方法属于这个类 如果生成的对象修改了这个成员,那么其他对象共享修改后的值 定义和初始化 class ABC { public: in ...

  4. VS2008新增文件没有模板

    可能是我安装的过程中发神经没有选中选项什么的,打开来想建个项目发现一个模板都没有,那就很尴尬了,作为对开发工具极度依赖的人,这真的难受... 在网上找到别人的办法 开始 –> 程序 –> ...

  5. SolidWorks学习笔记4特征

    绘制斜的拉伸效果 一般拉伸方向垂直于草图基准面, 可以实现绘制一条线,作为其拉伸方向 效果如下 简单孔 在菜单中选择“插入”--“特征”---“简单直孔” 选择一个平面放置 设置好孔的直径和深度后,确 ...

  6. python r r+;w w+;a a+;以及加不加b区别

    #以下内容均在正常打开文件的情况下运行 一.列表格 模式 可做操作 若文件不存在 是否覆盖 r 只能读 报错 --- r+ 可读可写 报错 是 w 只能写 创建 是 w+ 可读可写 创建 是 a 只能 ...

  7. （5.12）mysql高可用系列——复制中的在线切换GTID模式/增加节点/删除节点

    目录 [0]需求 前提,已经假设好基于传统异步复制的主库和从库1. [0.1]传统异步切换成基于GTID的无损模式 [0.2]增加特殊要求的从库 [1]操作环境 [2]构建 复制->半同步复制 ...

  8. “automation服务器不能创建对象”的问题的解决方案大全

    本人工作中的应用系统都是jsp的,大量javascript程序,一旦出“automation服务器不能创建对象”问题,大量报表及查询无法保存,苦思冥想.千尝万试,终于将其搞定,现将相关方案与大家共享. ...

  9. Git的常见操作

    1.git init:初始化     git status:查看版本状态     git log : 查看提交日志

  10. java this的作用

    this: 区分成员变量和局部变量的重名问题,this.name指的是类中的成员变量,而不是方法内部的