相同点：

两者都可以将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. json文件操作

    1.把字典或list转换成字符串方法 json.dumps() 2.把字符串转换成字典方法 json.loads() 3.indent 存储文件时每行加缩进数 4.ensere_asci 文件中有中文 ...

  2. JS 浏览器BOM-->open() 方法

    1.定义和用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 语法: window.open(URL,name,specs,replace) 参数: URL:打开指定的页面的U ...

  3. 数据结构和算法(Golang实现)(15)常见数据结构-列表

    列表 一.列表 List 我们又经常听到列表 List数据结构,其实这只是更宏观的统称,表示存放数据的队列. 列表List:存放数据,数据按顺序排列,可以依次入队和出队,有序号关系,可以取出某序号的数 ...

  4. [转] [腾讯游戏学院] Roguelike到底是什么？

    如果你是一位资深游戏玩家,那么最近你肯定在哪里看到过 Roguelike 这个词.Roguelike 这个古老的游戏类型现在又变得很潮流,其中各种要素都在不断的被新游戏借鉴.作为一名就是比你有更多空余 ...

  5. Docker搭建Nessus pro笔记

    0x01 准备Docker环境 拉取镜像: docker pull ubuntu 创建容器: docker run -p 9922:22 -p 8834:8834 --name nessus -it ...

  6. 用Python绘制全球疫情变化地图

    目前全球疫情仍然比较严重,为了能清晰地看到疫情爆发以来至现在全球疫情的变化趋势,我绘制了一张疫情变化地图,完整代码共 230 行,需要的朋友在公众号回复关键字 疫情地图 即可. 废话不多说,先上图 下 ...

  7. jquery的焦点图片无限循环关键思维

    在循环的时候,关键的是按(下一页按钮)到最后一页的时候和按(上一页按钮)到到第一页的时候如何转换: 首先必须知道3个js方法,prepend().append()和clone(); prepend() ...

  8. 关于C++线程池的实现的思考

    今天突然对前些日子一直很疑惑的c++线程池有了新的想法.其实所谓的线程池无非就是两个技术点,一个,多线程,指工作线程和主线程分离,或者说数据接收和处理分两个线程,一般就是讲需要运行的函数放到子线程执行 ...

  9. 虎符ctf-MISC-奇怪的组织(看完官方题解，找到了)

    一道取证题,一整场比赛,基本就死磕了这一题 写的很乱,因为当时的思维就是那么乱,完全没有注意到出题人的提示, 还没做出来,没有找到关键key 那个人的real name 文档:虎符.note链接:ht ...

  10. 转载-linux内核长什么样

    来源:Linux中国 今天,我来为大家解读一幅来自 TurnOff.us 的漫画 "InSide The Linux Kernel" . TurnOff.us是一个极客漫画网站,作 ...