相同点：

两者都可以将dom元素隐藏

不同点：

1.display: none 隐藏之后不占用文档流，而visibility: hidden却会占用文档流，如果要在隐藏元素的同时获取其尺寸信息，那就可以使用visibility: hidden

2.display: none 会引起页面的回流(重排)以及重绘，而visibility: hidden只会引起重绘，从性能角度上讲，visibility: hidden会稍微好点

3.display: none 的子元素不会进行显示，而visibility: hidden的子元素却是可以进行设置显示的

visibility: hidden 和 display: none的区别的更多相关文章

  1. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  2. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

  3. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  4. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  5. 再谈visibility:hidden和display:none

    之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...

  6. 为什么要用visibility:hidden;代替display:none;？

    为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器: css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如backgro ...

  7. What is the difference between visibility:hidden and display:none?

    What is the difference between visibility:hidden and display:none? 答案1 display:none means that the t ...

  8. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  9. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

随机推荐

  1. JAVA中基础类型和字串类型之间的相互转换

    转自:https://www.imooc.com/code/2251 仅做个人学习记录之用,侵删. 在程序开发中,我们经常需要在基本数据类型和字符串之间进行转换. 其中,基本类型转换为字符串有三种方法 ...

  2. AJ学IOS 之ipad开发Popover的基本使用

    AJ分享,必须精品 一:效果图 二:注意 对于方法[UIPopoverController dealloc] reached while popover is still visible. 当popo ...

  3. 【Jenkins】参数化引用

    我们在Jenkins里设置了参数如下 1. Jenkins中引用 shell引用  $env windows bat引用 %env% 在git等源码管理时,调用参数的格式${env} 2. jmete ...

  4. D. 蚂蚁平面

    D. 蚂蚁平面 单点时限: 2.0 sec 内存限制: 512 MB 平面上有 n只蚂蚁,它走过的路径可以看作一条直线 由这n 条直线定义的某些区域是无界的,而另一些区域则是有界的. 有界区域的最大个 ...

  5. Mark down 使用总结

    Markdown语法 Markdown是一种纯文本.轻量级的标记语言,通过简单的标记,就可以使文本具有一定的格式,操作简单.使用广泛,常见的比如github上的README.md . Markdown ...

  6. C#集合类型——Hashtable、Dictionary之浅谈

    Hashtable表 数组.数组集合.List集合都是通过索引来访问里面成员.哈希表则是通过键来访问成员值.键不可为空,值可为空. 比如: Hashtable  hash=new  Hashtable ...

  7. python 进阶篇 浅拷贝与深拷贝

    阐述引用.浅拷贝和深拷贝前,首先需要要了解 Python 的世界里,一切皆对象,每个对象各包含一个 idendity.type 和 value. 引用(Reference) >>> ...

  8. 15分钟从零开始搭建支持10w+用户的生产环境(三)

    上一篇文章介绍了这个架构中,选择MongoDB做为数据库的原因,及相关的安装操作. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(二)   三.WebServer 在SOA和gRPC大行其 ...

  9. 面试官：你对Redis缓存了解吗？面对这11道面试题你是否有很多问号？

    前言 关于Redis的知识,总结了一个脑图分享给大家 1.在项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 面试官心理分析 这个问题,互联网公司必问,要是一个人连缓存都不太清楚, ...

  10. 算法笔记刷题1（codeup 1934)

    准备6月份的拼题甲级中(本来现在这两天就考试了,但是因为疫情的原因延期了) 刚刚开始按算法笔记刷题,今天是探索codeup的第一天. 一开始并没有把多点测试当回事,直到一错再错,心态爆炸... 附上我 ...