相同点：

两者都可以将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. Chrome浏览器架构

    通用浏览器架构 它可以是一个具有许多不同线程的进程,也可以是具有几个通过IPC进行通信的多个线程的进程. 一个具有许多不同线程的进程 通过IPC进行通信的多个线程的进程 注意 这些不同的体系结构是实现 ...

  2. win7下delphi中的help文档问题

    一,要安装WinHlp32.exe 文件 二, 三,在安装目录下:

  3. stand up meeting 12/29/2015

    part 组员                今日工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云 重写popup UI添加笔记功能     6 mergeUI ...

  4. OpenCV 之 基本绘图

    OpenCV 虽是开源的计算机视觉库,但里面也有一些基础的绘图函数,本文将介绍几种常用绘图函数:直线.圆.椭圆.长方形.多边形等. 1  数据结构 1.1  二维向量 cv::Point 代表的是二维 ...

  5. element-ui修改自定义主题

    官方文档:https://element.eleme.cn/#/zh-CN/component/custom-theme 简单更换主题色 打开:在线主题编辑器,仅修改主题色,点击右上角[切换主题色], ...

  6. C++获取char值

    直接获取内存地址,不需要定义指针类型的方法,(当然也就不需要释放了)USES_CONVERSION;    if (myFun1)    {        CString _input;       ...

  7. Java 网络编程 --基于UDP实现一对一聊天功能

    UDP 基本流程: UDP发送端基本流程: 1.使用DatagramSocket 指定端口 创建发送端 2.准备数据 一定转成字节数组 3. 封装成DatagramPacket 包裹,需要指定目的地 ...

  8. audio的自动播放报错解决

    使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...

  9. jeecg ant design vue 一些收藏

    1关于 进来清除上次记录 找到src/permission.js下的

  10. Sublime text 3快捷键壁纸版