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. Cocoa 初识

    1,判断程序是否第一次启动 OC: if (![[NSUserDefaults stringOfKeyInStandardDefaults:FirstOpenApp] boolValue]) { [s ...

  2. HDU 2204 Eddy's爱好（容斥原理dfs写法）题解

    题意:定义如果一个数能表示为M^k,那么这个数是好数,问你1~n有几个好数. 思路:如果k是合数,显然会有重复,比如a^(b*c) == (a^b)^c,那么我们打个素数表,指数只枚举素数,2^60 ...

  3. firefox、chrome的DNS缓存清除方法

    通过设置hosts文件可以强制指定域名对应的IP,当修改hosts文件,想要浏览器生效,最直接的方法关闭浏览器后重新开启:如果不想重启浏览器,只需要清空浏览器的DNS缓存即可. 清空DNS缓存在chr ...

  4. C#中的编译开关

    c#不支持宏定义,只支持编译开关. ======================================我想加上#define xxx就编译a代码,否则编译b代码,像这样的:#if xxxa ...

  5. C#学习笔记（一）：C#简介

    计算机语言计算机语言是指用于人与计算机之间通讯的语言机器码——汇编语言——高级语言(面向过程(线性).面向对象(类).面向组件(Unity)) 一.计算机语言发展趋势1.简单:代码生成逻辑2.面向人类 ...

  6. 04_Windows平台Spark开发环境构建

    Spark的开发环境,可以基于IDEA+Scala插件,最终将打包得到的jar文件放入Linux服务器上的Spark上运行 如果是Python的小伙伴,可以在Windows上部署spark+hadoo ...

  7. UVa 225 黄金图形（回溯+剪枝）

    https://vjudge.net/problem/UVA-225 题意:平面上有k个障碍点,从(0,0)出发,第一次走1个单位,第二次走2个单位,...第n次走n个单位,最后恰好回到(n,n).每 ...

  8. UVa 12174 Shuffle（滑动窗口）

    https://vjudge.net/problem/UVA-12174 题意: 你在听音乐播放器,它采用随机播放形式.随机播放的原理时先随机产生一个1~n的排列,然后就按这个排列顺序播放歌曲.播放完 ...

  9. JDK tools之jps和jstack诊断Java程序

    大部分Java开发者可能知道有这么个工具,但是没怎么用过,每次还得百度一下.我也是之一 -_-!!. 每次遇到

  10. Educational Codeforces Round 1 E. Chocolate Bar dp

    题目链接:http://codeforces.com/contest/598/problem/E E. Chocolate Bar time limit per test 2 seconds memo ...