相同点：

两者都可以将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. python连接mysql中文数据编码

    系统是win7 x64 Python 2.7.6的site.py里面编码设定为 utf-8 py文件首行指定 #coding:utf-8 MySQL 5.5.38安装时指定代码为utf-8 peewe ...

  2. 基于 HTML5 WebGL 的楼宇智能化集成系统（三）

    前言       2018年7月,信息化部印发了<工业互联网平台建设及推广指南>和<工业互联网平台评价方法>,掀起了 工业互联网 的浪潮,并成为热词写入了报告中.同为信息发展下 ...

  3. Python Requests-学习笔记(5)-响应状态码

    我们可以检测响应状态码: r = requests.get('http://httpbin.org/get') r.status_code 为方便引用,Requests还附带了一个内置的状态码查询对象 ...

  4. 三、Pycharm2019.3.3的安装

    一:什么是Pycahrm PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动 ...

  5. hadoop(三)伪分布模式hdfs文件处理|5

    伪分布模式hdfs 1.启动hsfs 2. 编辑vi hadoop-env.sh image.png image.png 3.配置nameNode和生产文件第地址 [shaozhiqi@hadoop1 ...

  6. Windows Server 2016 Storage Replication

    Storage Replication是Windows Server 2016中新增的一项功能,它是利用windows server自带的块存储复制技术 首先,我们简答粗暴的交代一下部署需求: 1.该 ...

  7. Netty是如何处理新连接接入事件的？

    更多技术分享可关注我 前言 前面的分析从Netty服务端启动过程入手,一路走到了Netty的心脏——NioEventLoop,又总结了Netty的异步API和设计原理,现在回到Netty服务端本身,看 ...

  8. Docker-Bridge Network 01 容器间通信

    本小节介绍bridge network模式下,单机上的容器网络拓扑及通信. 1.前言 对于单机上的容器,Docker提供了bridge.host.none三种网络.我们首先介绍经典的bridge模式. ...

  9. WinRAR代码执行漏洞复现

    漏洞介绍 WinRAR 是一款流行的解压缩工具,据其官网上发布的数据,全球有超过5亿的用户在使用 2019年2月20日,安全厂商 checkpoint 发布了名为<Extracting a 19 ...

  10. ASP.Net内置对象之网页之间传参（一）

    Response对象 主要运用于数据从服务器发送到浏览器,可以输出数据.页面跳转.各个网页之间传参数等操作. 以下讲解几个常用例子: 在页面中输出数据 主要通过Write .WriteFile方法输出 ...