大多数人很容易将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. 用UltralSO安装CentOS 和 Ubuntu

    UltralSO是一个U盘制作工具,这几天用UltralSO安装了CentOS和Ubuntu 制作这两个U盘启动程序的区别是,CentOS安装完后,需要把.iso文件拷贝到U盘中,而且CentOS文件 ...

  2. Xen虚拟机磁盘镜像模板制作(三)—CentOS 7

    这里整理下制作Xen CentOS 7磁盘镜像模版的流程: 1.创建一个将要用来安装CentOS 7系统的LV,命令如下: [root@localhost ~]# lvcreate -L 5G -n ...

  3. 哎哟，我的.NET呀

    今早无意看到一篇文章,看着.Net被喷得越来越惨,终于还是有人忍不住要奋起反抗了哇! 虽然我已经转了java(大致方向)(没想到我是转的java方向!)好吧!其实也不算是转,就像文章所说的,我最多算是 ...

  4. 文件系统层次标准FHS的详细介绍

    Filesystem Hierarchy Standard (文件系统层次标准,FHS)标准依据文件系统使用的频繁与否与是否允讲使用者随意更动, 而将目录定义成四种交互作用的形态,具体如下: 可分享的 ...

  5. Java 性能优化实战记录(1)---定位并分析耗cpu最多的线程

    1) jps    列出相关的java进程, 以及对应的pid    也可以使用如下命令来尝试    ps aux | grep java --color 2) top -Hp <pid> ...

  6. cdoj 482 优先队列+bfs

    Charitable Exchange Time Limit: 4000/2000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Othe ...

  7. ZOJ 1107 FatMouse and Cheese

    原题链接 题目大意:FM在一个街道n*n街道的(0,0)点,在每个网格里放着cheese,他要尽可能多的吃这些cheese.有两个规则:1)他跑的总距离不能超过k步:2)下一个节点的cheese的块数 ...

  8. canvas-绘制时钟

    把最近学到的一些canvas技能全部发上来,刚开始写博客,感觉还不太习惯,不过我相信慢慢就会习惯了.不啰嗦了,把代码送上,看不懂的话可以先去学习下基础教程,把基础学好了也就能看懂了. <!DOC ...

  9. ubuntu 以root 运行程序

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  10. leetcode 41 First Missing Positive ---java

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...