style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变.
　　style="display:none": 使对象在网页上彻底消失,不为被隐藏的对象保留物理空间.

　　实际举例如下:

 <html>

   <head>

   <title>style="visibility:hidden"与style="display:none"的区别</title>

   </head>

   <body>

     <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>

     <span style="display:none; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><br/>

   </body>

 </html>

转：http://blog.csdn.net/maxracer/article/details/6711586

Html style="visibility:hidden"与style="display:none"的区别的更多相关文章

  1. style="visibility: hidden" 和 style=“display:none”区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...

  2. style="visibility: hidden"和 style=“display:none”之间的区别

    style=“display:none” 隐藏页面元素: <html> <head> <script type="text/javascript"&g ...

  3. JS中style.display和style.visibility的区别

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时 ...

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

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

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

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

  6. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  7. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  8. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

  9. display：none和visibility:hidden

    w3school学习网:https://www.w3school.com.cn/tiy/t.asp?f=hdom_style_display_none display: none----将元素的显示设 ...

随机推荐

  1. 安装VMware-tools出现initctl: Job failed to start

    安装VMware-tools中出现: ******* Creating a new initrd boot image for the kernel.update-initramfs: Generat ...

  2. 无监督学习：Deep Auto-encoder（深度自动编码器）

    一 Auto-encoder NN Encoder & NN Decoder 要一起训练. 二 Starting from PCA 三 Deep Auto-encoder PCA&De ...

  3. linux文件重命名

    rename 命令用字符串替换的方式批量改变文件名. 语法 rename(参数) 参数 原字符串:将文件名需要替换的字符串: 目标字符串:将文件名中含有的原字符替换成目标字符串: 文件:指定要改变文件 ...

  4. window安装android打包环境

    1.下载jdkhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载:jdk-8u1 ...

  5. Glassfish 4 修改server.log 等配置

    如果所示:

  6. ios Realm的使用 本地数据存储

    引入需要的文件 pod 'RealmSwift' pod 'Realm' 然后在命令行使用 (首先应该cd到项目的根目录)输入 pod install 等待下载就行了(这个下载有点费劲,其他的插件包下 ...

  7. easyui datagrid编辑时编辑框自动获取焦点

    onDblClickCell:function(rowIndex, field, val){//双击单元格监听器 $(this).datagrid('beginEdit',rowIndex);//开启 ...

  8. Core2.0 项目到2.1

    Core2.0 项目到2.1 https://www.cnblogs.com/FlyLolo/p/ASPNETCore2_10.html .NET Core 2.1 终于发布了, 赶紧升级一下. 一. ...

  9. NET Core 2.1 Preview 1

    NET Core 2.1 Preview 1 [翻译] .NET Core 2.1 Preview 1 发布 原文: Announcing .NET Core 2.1 Preview 1 今天,我们宣 ...

  10. 069 Sqrt(x) 求平方根

    实现 int sqrt(int x) 函数.计算并返回 x 的平方根.x 保证是一个非负整数.案例 1:输入: 4输出: 2案例 2:输入: 8输出: 2说明: 8 的平方根是 2.82842..., ...