一、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. pthon基础知识（索引、切片、序列相加、乘法、检查元素是否是序列成员、计算序列长度、最大最小值）

    序列   数据存储方式  数据结构 python 列表.元组.字典.集合.字符串 序列: 一块用于存放多个值的连续内存空间,并且按一定顺序排列,可以通过索引取值 索引(编号): 索引可以是负数 从左到 ...

  2. Django与Cookie

    Cookie Cookie的由来 ​ 大家都知道HTTP协议是无状态的.无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也 ...

  3. python网络应用篇

    正则表达式 import re #引入正则表达式模块  使用re.match/search函数进行匹配(区别:match只匹配字符串的开始,如果不符合正则表达式,则匹配失败,返回None,而searc ...

  4. C# AE 通过要素类工作空间将shp路径string类型对象转换为IFeatureClass；

    IWorkspaceFactory pWorkspaceFactory = new ShapefileWorkspaceFactoryClass();//打开shapefile工作空间openFile ...

  5. windows server 2008 R2 怎么集成USB3.0驱动

    DELL最新出的T130.T330.R230.R330四款服务器新增了USB3.0功能,在安装2008 R2系统镜像需要集成USB3.0才能安装,不然鼠标和键盘动不了 先在D盘创建一个文件夹Temp, ...

  6. 【VS开发】浅谈C/C++中的static和extern关键字

    一.C语言中的static关键字 在C语言中,static可以用来修饰局部变量,全局变量以及函数.在不同的情况下static的作用不尽相同. (1)修饰局部变量 一般情况下,对于局部变量是存放在栈区的 ...

  7. Laravel NPM包的使用

    示例:安装sweetalert插件 1.yarn add sweetalert 2.resources/js/bootstrap.js中引入: require('sweetalert'); $(doc ...

  8. 关于Linux文本处理“三剑客”的一些小操作。

    Linux文本处理“三剑客”,即grep.sed.awk,这是Linux中最核心 的3个命令. 一.首先做个简单的介绍: 1.awk:linux三剑客老大,过滤,输出内容,一门语言.NR代表行号. 2 ...

  9. 双元素非递增（容斥）--Number Of Permutations Educational Codeforces Round 71 (Rated for Div. 2)

    题意:https://codeforc.es/contest/1207/problem/D n个元素,每个元素有a.b两个属性,问你n个元素的a序列和b序列有多少种排序方法使他们不同时非递减(不同时g ...

  10. C# 连接 Oracle数据库增删改查，事务

    一. 前情提要 一般.NET环境连接Oracle数据库,是通过 TNS/SQL.NET 配置文件,而 TNS 必须要 Oracle 客户端(如果连接的是服务器的数据库,本地还要装一个 client , ...