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. 20145206邹京儒 EXP7网络欺诈技术防范

    20145206邹京儒 EXP7网络欺诈技术防范 一.实践过程记录 URL攻击实验前准备 1.在终端中输入命令:netstat -tupln |grep 80,查看80端口是否被占用,如下图所示 2. ...

  2. 20145216《网络对抗》逆向及BOF基础实践

    20145216<网络对抗>逆向及BOF基础实践 1 逆向及Bof基础实践说明 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函 ...

  3. Python3基础 assert 断言 确保程序的正确运行条件

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

  4. JavaScript:正则表达式 应用

    1. var data = "<table id=\"test\"><tr class=\"light\"><td> ...

  5. Unity3D学习笔记（十四）：Animation旧动画

        animator(新动画系统):骨骼动画,骨骼驱动,格式化编辑,动画机图形化 animation(旧动画系统):物理系统,帧动画 一.如何建立动画文件 Animation Clip 手动添加动 ...

  6. Android程序示例

    目录 Android代码示例 OptionsMenu ImageButton CheckBox & RadioButton Context Menu快捷菜单 Key Event ListVie ...

  7. HDU 2544 最短路（Dijkstra）

    https://vjudge.net/problem/HDU-2544 题意: 输入包括多组数据.每组数据第一行是两个整数N.M(N<=100,M<=10000),N表示成都的大街上有几个 ...

  8. vue router菜单 存在点哪个但还是会显示active

    <router-link to="/" exact>Home</router-link> <router-link to="/add&quo ...

  9. python flask 接口

    例子1 from flask import Flask, jsonify app = Flask(__name__) tasks = [ { , 'title': u'Buy groceries', ...

  10. MongoDB（课时20 游标）

    3.5 游标(重点) 所谓游标就是指数据可以一行行的进行操作,非常类似于ResultSet数据处理.在MongoDB里对游标的控制使用find()函数就可以返回游标.对于返回的游标如果想进行操作,使用 ...