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. 20145333茹翔 Exp5 Adobe阅读器漏洞攻击

    20145333茹翔 Exp5 Adobe阅读器漏洞攻击 实验过程 主机为kali的ip地址为:192.168.1.111.靶机windows xp 的ip地址为:192.168.1.110 使用命令 ...

  2. 2018-2019-1 20189218《Linux内核原理与分析》第九周作业

    进程调度的时机 进程调度时机就是内核调用schedule函数的时机.当内核即将返回用户空间时,内核会检查need_resched标志是否设置.如果设置,则调用schedule函数,此时是从中断(或者异 ...

  3. Python3基础 getattr 获取对象的指定属性值

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. Hexo 搭建 Blog 精简笔记

    安装Hexo npm install -g hexo-cli Mac 用户 您在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preference ...

  5. c++类定义代码的分离

    类文件 实际工程中,对一个类的说明.架构.描述方法是:    往往分成头文件和实现的源文件,来实现代码的分离 然后,源文件中包含类的头文件... 头文件的包含问题: 类对应的实现文件cpp.main主 ...

  6. c#传统SqlTransaction事务和TransactionScope事务

    事务有很多种,看了一些关于事务的问题,这里做下笔记····· 事务时单个的工作单位.如果某一事务成功,则在该事务中进行的所有数据更改均会提交,成为数据库中永久的组成部分.若果事务遇到错误,则必须取消或 ...

  7. ovs-ofctl: s1 is not a bridge or a socket 解决方法

    参考: ovs-vsctl: Error detected while setting up bridge ovs-ofctl: s1 is not a bridge or a socket 解决方法 ...

  8. UVa 1347 旅行

    https://vjudge.net/problem/UVA-1347 思路:用d(i,j)表示第一个人走到i,第二个人走到j,还需要走多长的距离.在这里强制定义i>j,并且每次只能走到i+1. ...

  9. UVa 1374 快速幂计算（dfs+IDA*）

    https://vjudge.net/problem/UVA-1374 题意:给出n,计算最少需要几次能让x成为x^n(x和已经生成的数相乘或相除). 思路:IDA*算法. 如果当前数组中最大的数乘以 ...

  10. 关于ES6的箭头函数的详解

    ok  坑比函数~~箭头函数~~不自己动手写看懂也不行~~~ 当然你也可以一点一点的把函数复制到Babel里面去将ES6转换成ES5  (斗笔行为) 老谢写的笔记教程就是深入(通俗易懂)哈哈~~~ 第 ...