display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

例子

<html>

    <head>

    <title>display:none和visible:hidden的区别</title>

    </head>

    <body >

    <span style="display:none; 隐藏区域</span><span style=" background-color:Green">显示区域</span><br />

    <span style="visibility:hidden; 隐藏区域</span><span style="background-color:Green">显示区域</span>

    </body>

</html>

css display&&hidden的更多相关文章

  1. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

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

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

  3. [转]CSS Display(显示) 与 Visibility（可见性）

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

  4. CSS Display(显示) 与 Visibility（可见性）

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

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

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

  6. CSS Display（显示）和Visibility（可见性）

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

  7. CSS——display（Block none inline等）属性的用法

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

  8. CSS：CSS Display(显示) 与 Visibility（可见性）

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

  9. CSS display:inline-block

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

随机推荐

  1. BIOS、MBR、UEFI和GPT关系

    很多用户在新买电脑,或是给已有电脑重装系统时都出现过怎么都无法引导U盘安装的情况.究其原因,还是没能搞清楚BIOS.MBR.UEFI和GPT的复杂关系.所以,今天小编就和大家分享一下它们之间的爱恨情仇 ...

  2. 完美解决vim在终端不能复制的问题

    以前 用xshell,或者其他工具ssh到远程服务器,vim不能复制,搜索说是vim的 -xterm_clipboard没有开启. 今天发现,至少鼠标复制是不需要这个东东的! 在stackoverfl ...

  3. [不屈的复习] - http://how2j.cn/

    http://how2j.cn/ 该教程网站分得比较规整!

  4. Spring security框架原理

    转自: http://www.blogjava.net/youxia/archive/2008/12/07/244883.html  在SpringSide 3的官方文档中,说安全框架使用的是Spri ...

  5. MVC---- DataSet 页面遍历

    后台代码: public override ActionResult Index() { DataSet ab = custapp.GetCustomerFollows(); ViewData[&qu ...

  6. List与数组的相互转换

    1.从string[]转List<string> string[] str={“1”,”2”}; List <string> list=new List<string&g ...

  7. python tcp

    server import socket host="localhost" port= s=socket.socket(socket.AF_INET,socket.SOCK_STR ...

  8. [ios]NSThread传值 NSValue传值

    NSThread:http://www.cocoachina.com/bbs/read.php?tid=51873 NSValue:http://blog.sina.com.cn/s/blog_bf9 ...

  9. 音视频学习系列第（三）篇---wav文件的存储和解析

    音视频系列 什么是wav wav是一种无损的音频文件格式,wav文件有两部分,第一部分是文件头,记录一些重要的参数信息,如音频的采样率,通道数,数据位宽,第二部分是数据部分,数据部分可以是PCM,也可 ...

  10. 使用Fragment适应不同屏幕和分辨率

    Fragment是Android3.0后增加的新控件,有点类似于Activity组件,也是用来承载各种View元素.Google增加这个 玩意的目的是为了平板电脑里面可以复用部分显示的View,只要写 ...