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. phpStudy 切换版本后没有权限的问题

    在httpd-vhosts.conf配置如下: <VirtualHost *:80> ServerName www.jy.com DocumentRoot "C:\htdocs\ ...

  2. 加载xib文件，如果想在初始化的时候就添加点东西就重载-(id)initWithCoder:(NSCoder *)aDecoder

    - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { self.cl ...

  3. 我的代码-sql query

    # coding: utf-8 # In[ ]: WITH List AS (SELECT e.*,f.* FROM( SELECT DISTINCT c.lot_id, c.wafer_key,LE ...

  4. zoj 1649 bfs

    Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is described as a N * M ...

  5. JS实现购物商城商品放大

    img属于行内元素 <img src=''>gq</img> 效果 当放大图片时候,文字位置发生改变 文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候, ...

  6. numpy用法

    NumPy中创建特殊值 np.nan    np.inf nan表示数据空缺   inf表示无穷 参考:https://www.cnblogs.com/haoxi/p/9175781.html

  7. 如何让 KiCad EDA 5.1 不显示铺铜

    如何让 KiCad EDA 5.1 不显示铺铜 在画板最后给 PCB 铺地,铺地结束后检查然后发板出去打板. 板子回来焊接,调试时发现有问题,边调边改线路,打开 KiCad 一看满屏的铜皮,怎么改呀? ...

  8. 树莓派3代B+安装mateubuntu16.04

    直接安装会卡在开机后的彩虹界面 所以先直接安装:2019-04-08-raspbian-stretch-lite.img 安装完毕后,直接在Linux环境下读取 /boot /系统分区(系统分区在wi ...

  9. mvc项目远程发布到windows server服务器

    1.安装IIS的时候需要将这两个选项勾选起来 2.确保 管理服务委派 这个选项存在 3.添加委派规则 4.配置IIS管理用户,后续需要用这个用户进行发布连接 5.配置站点的IIS权限 选择刚才在前面设 ...

  10. python安装media报错

    Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...