相同点：

两者都可以将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. Mysql大数据量问题与解决

    今日格言:了解了为什么,问题就解决了一半. Mysql 单表适合的最大数据量是多少? 我们说 Mysql 单表适合存储的最大数据量,自然不是说能够存储的最大数据量,如果是说能够存储的最大量,那么,如果 ...

  2. Nodejs开发微信公众号中控服务

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本项目旨在为多个微信公众号 ...

  3. matplotlib formatters

      Tick formatting is controlled by classes derived from Formatter. The formatteroperates on a single ...

  4. HashMap之KeySet分析

    本篇涵盖 1.HashMap并不是用keySet来存储key的原因及证明 2.keySet方法返回后的remove.add操作原理 一.方法作用 概括一下 1.keySet方法返回map中包含的键的集 ...

  5. 2020-3 网络对抗技术 20175120 exp5 信息搜集与漏洞扫描

    目录 实践目标 实践内容 各种搜索技巧的应用 搜索特定类型的文件Google Hacking 搜索网站目录结构 DNS IP注册信息的查询 网络侦查 基本的扫描技术:主机发现.端口扫描.OS及服务版本 ...

  6. Java 理解类加载过程 -- 自定义加载器

    类加载器可以看下我的收藏: https://www.cnblogs.com/dongguacai/p/5879931.html 现在准备一个字节码文件: 自定义加载器: package com.xzl ...

  7. MySQL基础知识和常用命令总结

    说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...

  8. Metasploit学习笔记(一)

    1.更新 apt-get update:更新源 apt-get upgrade:更新软件包 apt-get dist-upgrade:升级系统 2. Metasploit基础 2.1专业名词 Auxi ...

  9. php二维数组的排序

    /**  * @desc arraySort php二维数组排序 按照指定的key 对数组进行排序  * @param array $arr 将要排序的数组  * @param string $key ...

  10. （第五篇）Linux操作系统基本结构介绍

    Linux操作系统基本结构介绍 Linux系统一般有4个主要部分:内核.shell.文件系统和应用程序.内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用 ...