大多数人很容易将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. python numpy 的运算

    一,基本运算 >>> a = array([1,2,3,4])>>> aarray([1, 2, 3, 4])>>> b=arange(4)> ...

  2. 2016CCPC东北地区大学生程序设计竞赛1008/HDU 5929 模拟

    Basic Data Structure Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  3. linux中进程控制

    1.进程标识 每个进程都有一个非负整型表示的唯一的进程ID.进程ID标识符总是唯一的.  虽然进程ID是唯一的,但某个ID被回收后,ID号是可以复用的. ID为0的进程通常是调度进程(其常常被称交换进 ...

  4. UVa 442 矩阵链乘（栈）

    Input Specification Input consists of two parts: a list of matrices and a list of expressions. The f ...

  5. 课堂所讲整理：HTML--6运算符、类型转换

    1.类型转换: 分为自动转换和强制转换,一般用强制转换. 其他类型转换为整数:parseint(): 其他类型转换为小数:parsefloat(): 判断是否是一个合法的数字类型:isNaN(): 是 ...

  6. Python笔记本

    Python 的主提示符( >>> )和次提示符( ... ).主提示符是解释器告诉你它在等你输入下一个语句,次提示符告诉你解释器正在等待你输入当前语句的其它部分. 下划线(_)在解 ...

  7. Kali linux渗透测试的艺术 思维导图

    Kali Linux是一个全面的渗透测试平台,其自带的高级工具可以用来识别.检测和利用目标网络中未被发现的漏洞.借助于Kali Linux,你可以根据已定义的业务目标和预定的测试计划,应用合适的测试方 ...

  8. input、select等表单元素的对齐问题

    今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...

  9. [hdu 3605]Escape

    这题的做法非常直观,却又非常不直观 先容许我吐一下槽吧~作者你的英语是读到火星上去了喵? 题目大体是说人类要移民,然后有 n 个人, m 个星球 每个人都有 m 个 0 . 1 数码表示他能否移民到该 ...

  10. python主文件判断

    目录结构: myfile1.py.myfile2.py.myfile3.py代码都是打印文件名和__name__变量,如myfile1.py: print("myfile1",__ ...