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. 20145339顿珠 MS08_067漏洞测试

    20145339顿珠 Exp5 MS08_067漏洞测试 实验过程 IP地址:192.168.1.104 虚拟机ip:192.168.1.102 在控制台内使用search ms08_067查看相关信 ...

  2. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  3. 前端开发环境全面配置 --- mac OS

    Mac 开发配置 brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...

  4. 高通平台读写nv总结【转】

    本文转载自:https://blog.csdn.net/suofeng12345/article/details/52713993 一,引言      1. 什么是NV       高通平台的NV,保 ...

  5. Github使用教程详解

    官方网站:http://git-scm.com Git是目前世界上最先进的分布式版本控制系统(没有之一). Git有什么特点?简单来说就是:高端大气上档次! 一.Git安装 在Linux上安装Git ...

  6. linux下的下载之道

    a.场景: 平时会使用百度网盘下载电影,但是用ios版的百度云实在是有点慢,而平时不用windows,因此只能在linux上寻找解决之道. b.背景(我正在使用中): linux:ubuntu 14. ...

  7. 快速排序|2018年蓝桥杯B组题解析第五题-fishers

    标题:快速排序 以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. #include <s ...

  8. (02) 任务(Jobs)和触发器(Triggers)

    Quart 的 API Quartz API 中的关键接口和类如下: IScheduler-与调度器(scheduler)进行交互的主要 API: IJob-被组件继承和实现,由调度器来执行的接口: ...

  9. sopt:一个简单的python最优化库

    引言     最近有些朋友总来问我有关遗传算法的东西,我是在大学搞数学建模的时候接触过一些最优化和进化算法方面的东西,以前也写过几篇博客记录过,比如遗传算法的C语言实现(一):以非线性函数求极值为例和 ...

  10. grep -v grep

    ps -ef|grep /usr/local/tomcat_coachqa/ |grep -v grep |awk '{print $2}'|xargs kill -9 grep -v grep gr ...