display:none

1.使元素隐藏，不再占据空间。

2.动态操作时会引起页面回流和重绘，影响性能。

3.子元素也会被隐藏并且添加display:block/visibility:visible无效。

visibility:hidden

1.使元素隐藏，占据空间。

2.只引起页面重绘，性能开销相对较低。

3.子元素也会被隐藏，但是添加visibility:visible子元素会显示。

注：回流和重绘见基础总结（05）-- 回流和重绘

基础总结（04）-- display:none;&&visibility:hidden;区别的更多相关文章

  1. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  2. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  4. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  5. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  6. hidden="hidden"，display:none, visibility:hidden 三者的区别

    三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...

  7. display 和 visibility 的区别

    设置控件隐藏 1.display:none  不为元素保留位置 2.visibility:hidden  占位置,是对象在网页上看不到,所占空间没有变化

  8. display和visibility的区别

    一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...

  9. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

随机推荐

  1. Image Widget 的几种加入形式

    image .asset : 加载资源图片,会使打包时包体过大 image.network :网络资源图片,经常换的或者动态的图片 image file : 本地图片,比如相册 重用属性:  fit ...

  2. UVa 712

    这个题根本不用建树,因为是完全二叉树,可以把这个想成二进制.对于根是二进制数的首位,之后依次类推.到最后的叶子节点就是从0到pow(2,n)-1. 关键在于在第一次输入的不是按照x1,x2,x3,x4 ...

  3. dee

    窗口居中def center(self): screen = QDesktopWidget().screenGeometry() size = self.geometry() self.move((s ...

  4. Python线程的用法 函数式线程_thread和threading 样例

    函数式线程写起来比较简单,但是功能没有threading那么高级,先来个函数式编程样例: #!/usr/bin/python #coding: utf-8 #————————————————————— ...

  5. js cookie 操作 封装

    pCookie.js (function(){ var PotatogCookie = {}; //设置cookie PotatogCookie.set = function(key, value, ...

  6. 用turtle实现动态汉诺塔

    代码如下: (此代码最多可支持七层) import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): ...

  7. JDK安装与环境配置——学习JAVA的准备工作

    1.安装JDK 官网,版本看了也不明白区别,我下载的第一个 JAVA SE 12 https://www.oracle.com/technetwork/java/javase/downloads/in ...

  8. webpack 配置别名，解决 import 时路径查找麻烦的问题

    在编写代码时,使用 import 导入别的文件,可能会遇到查找路径麻烦的问题 比如这里的 ../../ 还要去思考多少个 ../ 那么可以在 webpack 中,将 src 目录设置一个别名,方便文件 ...

  9. 导出excel,并将数据返回给前端（包含权限判断）

    一.先写导出按钮接口 1.此接口对用户权限进行判断 2.此接口将前端的参数组合拼凑到下一个接口的url中去,用于条件筛选 3.用户有权限的情况下将用户的权限信息保存到redis中去,并将token写到 ...

  10. WinForm控件开发总结目录

    WinForm控件开发总结(一)------开篇 WinForm控件开发总结(二)------使用和调试自定义控件 WinForm控件开发总结(三)------认识WinForm控件常用的Attrib ...