当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。注意,当元素被隐藏之后,就不能再接收到其它事件了。
display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。

当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。

将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)

css display visibility的更多相关文章

  1. [转]CSS Display(显示) 与 Visibility(可见性)

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  2. CSS Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  3. CSS Display(显示)和Visibility(可见性)

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

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

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

  5. CSS:CSS Display(显示) 与 Visibility(可见性)

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  6. python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  7. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  8. CSS display:inline-block

    CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...

  9. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

随机推荐

  1. JavaScrip拖动动画中的常见BUG

    经常我们在用JS辛苦写完一个拖动效果之后 ,发现有各种无法用JS解决的BUG.比如拖动时DOM元素中的内容会变蓝,鼠标的指示会变为一个小+号,或disable的样式,通常这种情况一发生,我们的拖动效果 ...

  2. Linq操作

    Linq使用Group By 1 1.简单形式: var q = from p in db.Products group p by p.CategoryID into g select g; 语句描述 ...

  3. Java之HttpURLConnection的变态事: Keep-Alive

    HttpURLConnection的变态事: Keep-Alive JDK自带的HttpURLConnection默认启动Keep-Alive, 使用后的HttpURLConnection会放入池里重 ...

  4. MVC 局部加载页面的实例

    我们在做MVC 进行某一块的局部刷新,有的使用AJAX 请求,有的使用局部页: 下面我给大家推荐一种使用局部页面实现的这种方式: 第一步: 嵌套视图页 <div id="showAud ...

  5. .net 使用validator做数据校验

    概述 在把用户输入的数据存储到数据库之前一般都要对数据做服务端校验,于是想到了.net自带的数据校验框架validator.本文对validator的使用方法进行介绍,并分析下校验的的原理. 使用va ...

  6. Ubuntu14.04安装配置ndnSIM

    Ubuntu14.04安装配置ndnSIM 预环境 Ubuntu14.04官方系统 请先使用sudo apt-get update更新一下源列表 安装步骤 安装boost-lib sudo apt-g ...

  7. QT中实现中文的显示与国际化

    1 增加头文件    #include "QTextCodec" 2 在文件中增加如下内容 QTextCodec::setCodecForTr(QTextCodec::codecF ...

  8. Java Day 16

    基本数据类型包装类 Integer.MAX_VALUE  Integer.parseInt(); intValue(); valueOf(); 自动装拆箱 如果是一个字节范围,数据共享 字符串中 数值 ...

  9. P1699: [Usaco2007 Jan]Balanced Lineup排队

    很明显是一道RMQ问题,倍增法,维护一下区域的最大/小值就行了. var n,i,j,q,f,t,times:longint; hmin,hmax:array[..,..] of longint; f ...

  10. Unity3D定制新建C#文件的头描述

    1. 修改模板内容如下: MAC:Unity.app/Contents/Resources/ScriptTemplates/81-C# Script-NewBehaviourScript.cs.txt ...