一、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. shell一文入门通

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/hebtu666/article/deta ...

  2. C#中StringBuilder类的使用总结

    String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新 ...

  3. 白盒测试笔记之:testng 单元测试

    前言 前一篇文章我们简单了解了下单元测试的概念以及使用junit进行入门了. 但想更好做自动化测试,还是得了解下testng,毕竟,作为一名技术人,NG(下一代)的测试框架总得了解与跟进. testn ...

  4. IIS调试

    点击调试程序的时候默认启动TFS内置的调试服务器http://localhost:51607/,在该处填写自己在IIS上配置的站点就能进入自己的站点调试http://mr.ciwong.com

  5. docker数据卷学习-利用数据卷实现mysql的快速恢复和迁移

    docker数据卷学习 一 新建带有数据卷的容器 1.从docker hub下载centos7镜像 # docker pull centos 2. 创建container # docker run - ...

  6. httprunner - 源码解析

    这里只是做一个大概的解析,还有很多细节部分没有太过于关注 我们从cli.py开始进行解析 1.argparse.ArgumentParser 接受命令行的各种参数 [ argparse.Argumen ...

  7. 关于maven自动部署tomcat9 步骤

    maven 自动部署tomcat9 (远程方法) 1.首先要去配置用户,在tomcat的conf中有tomcat_users.xml,在其中有tomcat-user的配置 配置:<tommcat ...

  8. Test：河北金力集团企业网集成

    三.网站建设部分(40分) 河北金力集团公文流转系统 1.项目需求: 河北金力集团是我省机械加工的龙头企业,主要从事矿山机械制造及各种机械零部件加工.企业有3个厂区,主厂区位于省高新技术开发区,3个分 ...

  9. Navicat 连接数据库避免中文显示乱码问题解决

    在使用Navicat Premium连接数据库进行操作时,为避免出现中文乱码的问题解决: 1.连接SQL Server 在新建数据库时,常规 设置 排序规则 为 Chinese_PRC_CS_AS_W ...

  10. linux小白家教学<一>

    <数据中心规划与实施> 教学大纲  编写人:Allen 一. 课程教学内容及目标: (一) 知识目标 1.掌握企业级LINUX部署以及相关配置: 2.掌握LINUX操作系统基本的创建.删除 ...