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. 《网络攻防》实验五：MSF基础应用

    IE浏览器渗透攻击--MS11050安全漏洞 实验准备 1.两台虚拟机,其中一台为kali,一台为Windows Xp Professional(两台虚拟机可以相互间ping通). 2.亚军同学的指导 ...

  2. 20145336张子扬《网络对抗》MSF基础应用

    20145336张子扬 <网络对抗>MSF基础应用 实验一:主动攻击,利用ms08_067漏洞进行攻击 首先使用use exploit/windows/smb/ ms08_067 _net ...

  3. linux下kermit工具的使用

    1.环境: ubuntu16.04 2.背景: 想更换下位机内核 3.使用kermit进行串口传输 举例:传输文件到下位机 2.1首先进入下位机的uboot 2.2 使用uboot自带的命令从串口接收 ...

  4. 我在linux中使用的vundle 和 vimrc配置

    set nocompatible filetype off set rtp+=~/.vim/bundle/vundle/ call vundle#rc() Plugin 'gmarik/vundle' ...

  5. Spring资源加载基础ClassLoader

    1 ClassLoader工作机制 1.1 ClassLoader作用 寻找类字节码文件并构造出类在JVM内部表示的组件.负责运行时查找和装入Class字节码文件 1.2 装载步骤 1.2.1 装载 ...

  6. nginx缓存功能的设置

    首先用的缓存是proxy_cache. 在http段里加入下列几句: [plain] view plain copy   proxy_connect_timeout 5; proxy_read_tim ...

  7. 机器学习-数据可视化神器matplotlib学习之路（四）

    今天画一下3D图像,首先的另外引用一个包 from mpl_toolkits.mplot3d import Axes3D,接下来画一个球体,首先来看看球体的参数方程吧 (0≤θ≤2π,0≤φ≤π) 然 ...

  8. 关于Java 中Integer 和Long对象 对比的陷阱（简单却容易犯的错误）

    彩票客户端“忘记密码”功能有bug,今天调试时,发现了原因: 功能模块中有一段: if(userpo.getId()!=Long.valueOf(uid)){ throw new VerifyExce ...

  9. C#学习 day1 c#基础

    C#是一门编程语言,为什么我今天开始学C#了,下学期有门C#的课,以及有一个经验丰富的老学长正在做C#项目,由于之前学过C++和C基础,所以,C#的基础部分我查看文档来尝试能否自学归纳,而不是一直依靠 ...

  10. Oracle数据库常见版本

    Oracle数据库常见版本 在Oracle数据库的发展中,数据库一直处于不断升级状态,有以下几个版本: Oracle 8,Oracle 8i:Oracle 8i表示Oracle正式向Internet上 ...