一、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. IE条件注释语句

    项目 范例 说明 ! [if !IE] The NOT operator. This is placed immediately in front of the _feature_, _operato ...

  2. 从 SPIR-V 到 ISPC：将 GPU 计算转化为 CPU 计算

    游戏行业越来越多地趋向于将计算工作转移到图形处理单元 (GPU) 中,导致引擎和/或工作室需要开发大量 GPU 计算着色器来处理不同的计算任务.但有时候在 CPU 上运行这些计算着色器非常方便,不必重 ...

  3. windows使用放大镜快速放大屏幕局部

    Win10系统自带放大镜有时真的是比较难使用的,但是如果你对他的快捷键有所了解之后就会感觉它其实也没有那么难,用户可以在使用完之后直接按快捷键将其关闭,一起看看吧. Win10系统放大镜快速关闭快捷键 ...

  4. 云计算核心组件--keystone身份认证服务（5）

    一.Keystone介绍: keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等 ...

  5. Codeforces Round #594 (Div. 2)(A/B/C)

    A. Integer PointsDescription DLS and JLS are bored with a Math lesson. In order to entertain themsel ...

  6. 应用安全 - 社工 - 大数据 - Fofa - 汇总

    搜索语法 title=”abc”   header=”abc”  body=”abc”  domain=”xx.com”  host=”.xx.cn”  port=”443”     ip=”1.1. ...

  7. 【linux杂谈】查看centOS系统的版本号和内核号

    因为种种原因,我们通常需要查看centOS系统的版本号和内核号. 这里以centOS 6为切入点,展示了几种查看版本号和内核号的方法,同时也验证了其在centOS 7上的可行性. 一.centOS 6 ...

  8. Minicom 简单使用

    一. 什么是minicom 1.1. minicom 是linux 下的一个串口调试工具 二. minicom的使用 2.1. 进入设置 sudo minicom -s 2.1.1. 串口设置 i. ...

  9. 2019CCPC-江西省赛 -A Cotree (树形DP,求树上一点到其他点的距离之和)

    我是傻逼我是傻逼 #include<bits/stdc++.h> using namespace std; const int maxn=4e5+50; typedef long long ...

  10. sql server len函数

    len函数 --返回字符表达式中的字符数 --如果字符串中包含前导空格和尾随空格,则函数将它们包含在内 --LEN对相同的单字节和双字节字符串返回相同的值 --示例:select LEN('no'), ...