<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: -->

<!-- display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失-->

<!-- visible:hidden 使对象在网页上不可见，但该对象在网页上所占的物理空间没有改变-->

<!-- 需要注意bootstrap中的class='hidden' 是相当于display:none 是不占物理空间的 -->

<!-- 需要注意Jquery中的hide() 是相当于display:none 是不占物理空间的 -->

<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>

display:none和visibility:hidden区别的更多相关文章

  1. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  2. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  3. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  4. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  5. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  6. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  7. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  8. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  9. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

随机推荐

  1. Linux JDK配置

    第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586 ...

  2. Count Color 线段树

    Count Color Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  3. 我真的知道JavaScript吗？

    JavaScript 说说JavaScript 接触JavaScript时间其实已经不短了,之前一直是半瓶酱油,东凑西凑的收集相关的知识.并没有完整系统的学习过JavaScript,觉得JavaScr ...

  4. PowerBI开发 第七篇：数据集和数据刷新

    PowerBI报表是基于数据分析的引擎,数据真正的来源(Data Source)是数据库,文件等数据存储媒介,PowerBI支持的数据源类型多种多样.PowerBI Service(云端)有时不直接访 ...

  5. PHP计算上个月的开始时间和结束时间戳

    $m = date('Y-m-d', mktime(0,0,0,date('m')-1,1,date('Y'))); $t = date('t',strtotime($m)); //上个月共多少天 $ ...

  6. python中strip函数的用法

    python中往往使用剥除函数strip()来对用户的输入进行清理.strip函数的最一般形式为: str.strip('序列') 其中,序列是一段字符串,该函数表示从头或者从尾部开始进行扫描,如果扫 ...

  7. Uploadify 3.2上传文件，限制类型，大小，传递参数等

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="upload.aspx.cs ...

  8. java之基础数据类型学习————（一）

    JAVA数据类型: 总结来说,java的基本数据类型分为 四类八种 • 第一类:整数类型:byte.short.int.long • 第二类:浮点型:float.double • 第三类:字符类型:c ...

  9. Windows系统下使用Jenkins 自动发布 .NET core到Linux平台下Docker

    准备工作(安装过程可以百度,已安装的可以跳过) a)     安装Jenkins,安装包下载地址:http://mirrors.tuna.tsinghua.edu.cn/jenkins/windows ...

  10. win10 uwp 使用油墨输入

    win10可以很简单在我们的app使用自然输入,这篇文章主要翻译https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keybo ...