相同点：

两者都可以将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. idea 快捷键 pvsm sout

    1.在IntelJ中和Eclipse中稍有不同,在Eclipse中,输入main再按Alt+/即可自动补全main函数,但是在IntellJ中则是输入psvm,选中即可 2.在方法体内部有for循环, ...

  2. Powershell抓取网页信息

    一般经常使用invoke-restmethod和invoke-webrequest这两个命令来获取网页信息,如果对象格式是json或者xml会更容易 1.invoke-restmethod 我们可以用 ...

  3. GeoGebra小制作

    效果 文件链接https://www.geogebra.org/m/bkxrjymh  

  4. L20 梯度下降、随机梯度下降和小批量梯度下降

    airfoil4755 下载 链接:https://pan.baidu.com/s/1YEtNjJ0_G9eeH6A6vHXhnA 提取码:dwjq 梯度下降 (Boyd & Vandenbe ...

  5. Reward 杭电 2647

    Problem Description Dandelion's uncle is a boss of a factory. As the spring festival is coming , he ...

  6. asp.net core webapi Session 内存缓存

    Startup.cs文件中的ConfigureServices方法配置: #region Session内存缓存 services.Configure<CookiePolicyOptions&g ...

  7. solr管理集合

    其实完全版的管理,在web页面上就有. 同时,在官网文档上,也有:https://lucene.apache.org/solr/guide/6_6/coreadmin-api.html#CoreAdm ...

  8. 一、搭建SpringBoot2.0.0M4基础Web项目

    本次开发环境为: 系统:Linux Mint 18 JDK:1.8 开发工具:IntelliJ IDEA 2017.2.4 1.启动IDEA工具,开始创建一个基础项目.点击Create New Pro ...

  9. 今天，VS Code 五岁了。

    时光飞逝,岁月如梭.今天,VS Code 迎来了 5 岁的生日. 回想起 VS Code 发布的那一天,仿佛还在昨天. 回顾 VS Code 这五年的发展,总是能给我们开发者带了无限的惊喜. 2015 ...

  10. UML由浅入深

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...