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. stm32时钟树讲解

    1.管理好时钟,功耗才能更低

  2. HttpClient4.5简单使用

    一.HttpClient简介 HttpClient是一个客户端的HTTP通信实现库,它不是一个浏览器.关于HTTP协议,可以搜索相关的资料.它设计的目的是发送与接收HTTP报文.它不会执行嵌入在页面中 ...

  3. Linux文件时间详解ctime、mtime、atime【转】

    本文转载自:http://blog.csdn.net/doiido/article/details/43792561 Linux系统文件有三个主要的时间属性,分别是 ctime(change time ...

  4. uboot下的命令使用示例

    1.usb 可以使用此命令读取u盘里的内容,此命令加上相关参数可以有以下功能: 1.1usb start 在使用u盘之前必须启动此命令以初始化好fat文件系统环境,笔者的输出如下: jello # u ...

  5. ACM-ICPC 2018 沈阳赛区网络预赛 Made In Heaven（K短路）题解

    思路:K短路裸题 代码: #include<queue> #include<cstring> #include<set> #include<map> # ...

  6. FJNUOJ Yehan’s hole（容斥求路径数 + 逆元）题解

    Description Yehan is a angry grumpy rabbit, who likes jumping into the hole. This day,Yehan jumps ag ...

  7. IDEA，RubyMine等JetBrains系列软件通用破解教程

    此教程不光适用于IDEA,还可以在RubyMine等JetBrains系列软件使用,亲测可用. (1)下载安装你需要的JetBrains系列软件,安装完最好不要打开,直接finish,断开网络. (2 ...

  8. 51NOD 1069 Nim游戏

    1069 Nim游戏   有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆中取若干个,可将一堆全取走,但不可不取,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出 ...

  9. mysql 存储过程简单实例

    一.什么是存储过程 存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,存储在数据库中,经过第一次编译后再次调用不需要再次编译,用户通过指定存储过程 ...

  10. [原][OSG][osgBullet][osgworks][bullet]编译osgBullet尝试物理引擎

    相关网址: 类似文章:http://blog.csdn.net/lh1162810317/article/details/17475297 osgBullet官网:http://osgbullet.v ...