大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）

display 属性分别为block, inline, none

visibility和display的区别的更多相关文章

  1. js中 visibility和display的区别 js中 visibility和display的区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏,这用visibility=&q ...

  2. javascript中 visibility和display的区别

    visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏). 当visi ...

  3. css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  4. 两种隐藏元素方式【display: none】和【visibility: hidden】的区别

    此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...

  5. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

  6. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

  7. visibility，display区别

    visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失

  8. 表单元素（控件）不可见，你用visibility还是display？(转)

    属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...

  9. visibility和display的异同

    都有隐藏节点的作用. visibility:hidden; display:none; (1)visibility 规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的 ...

随机推荐

  1. CentOS 6.3配置PPTP VPN的方法

    1.验证ppp 用cat命令检查是否开启ppp,一般服务器都是开启的,除了特殊的VPS主机之外. [root@localhost1 /]# cat /dev/ppp cat: /dev/ppp: No ...

  2. 命令行创建畸形文件夹+畸形目录管理工具(DeformityPath)

    命令行创建畸形文件夹: 第一步:在运行中输入cmd,回车,打开命令行窗口 第二步:在命令行窗口中切换到想要建立文件夹的硬盘分区,如D盘(输入d:) 第三步:输入 MD 123..＼ 回车,注意文件夹名 ...

  3. iPhone 6/iPhone 6 Plus硬件性能

    iPhone 6/iPhone 6 Plus硬件性能 评分 4 分 正 如之前传闻的,这次同时发布了两款iPhone产品,分别是4.7英寸的iPhone 6和5.5英寸的iPhone 6 Plus.苹 ...

  4. com.google.guava 包解析 ——Google Guava官方教程（中文版）

    全网址           http://ifeve.com/google-guava/ 竹子博客:  http://www.cnblogs.com/peida/archive/2013/06/08/ ...

  5. zboot/piggyback.c

    /* *    linux/zBoot/piggyback.c * *    (C) 1993 Hannu Savolainen */ /* *    This program reads the c ...

  6. spark之数据源之自动分区推断

    在hadoop上创建目录/spark-study/users/gender=male/country=US/users.parquet(并且把文件put上去) code: package cn.spa ...

  7. scala言语基础学习十一

    隐式转换 使用隐式转换加强现有的类型的功能-类似于设计模式的装饰模式

  8. URAL Mosaic（并查集）（欧拉回路）

    Mosaic Time limit: 0.25 secondMemory limit: 64 MB There's no doubt that one of the most important an ...

  9. hdu3416 最短路+最大流

    题意:有 n 点 m 边,有出发点 A 到达点 B ,只允许走原图中的最短路,但每条边只允许被走一次,问最多能找出多少条边不重复的最短路 一开始做到的时候瞎做了一发最短路,WA了之后也知道显然不对,就 ...

  10. 关于MSP430中断机制

    中断很大程度上体现了一款单片机的性能,从这一点将MSP430在中断方面做得很不错,主要是提供了非常丰富的中断源,基本的有IO中断,定时器中断和一些接口中断(SPI,UART,I2C)等等.     现 ...