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. <正则吃饺子> ：关于微信支付的简单总结说明（二）

    关于微信退款 一.官方文档 申请退款:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_4&index=6 二.退款流程 ...

  2. ASPNET&nbsp;session客户端与服务…

    除非程序通知服务器删除一个session,否则服务器会一直保留,程序一般都是在用户做log off的时候发个指令去删除session.然而浏览器从来不会主动在关闭之前通知服务器它将要关闭,因此服务器根 ...

  3. SQL Server等待事件新解

    资源等待类型 并行:CXPACKET Buffer:PAGEIOLATCH_X 非Buffer:LATCH_X I/O:ASYNC_IO_COMPITION:IO_COMPITION CPU:SOS_ ...

  4. echarts学习的一些笔记

    工具栏组件 Show 是否显示 Feature 具体显示的功能 saveAslmage  保存图片 Restore 还原 dataZoom  缩放视图 magicType 动态类型切换 toltip组 ...

  5. js读取excel中日期格式转换问题

    在使用js-xlsx插件来读取excel时,会将2018/10/16这种数据自动装换成48264.12584511. 所以需要自己手动再转换回来 // excel读取2018/01/01这种时间格式是 ...

  6. 点击实现CSS样式切换

    如图所示 代码如下图: 特别要注意的是:a标签不会继承上级的color,所以要单独为其设置 参看代码(并非上图代码)如下: <!DOCTYPE html> <html> < ...

  7. 洛谷P3884 二叉树问题

    题目描述 如下图所示的一棵二叉树的深度.宽度及结点间距离分别为: 深度:\(4\) 宽度:\(4\)(同一层最多结点个数) 结点间距离: \(⑧→⑥为8 (3×2+2=8)\) \(⑥→⑦为3 (1× ...

  8. Hexo写作系列(3) - 文章标题含有双引号"导致页面渲染失败无法打开

    问题 在用Hexo写文章时,如果文章标题含有双引号",也就是说如果在文件头里的title出现双引号,如下: --- title: Hexo - 文章标题含有双引号"导致页面渲染失败 ...

  9. GYM 101572I（有向图上最小环）

    逗号空格是假的,全都直接连边就行. 提供一个迪杰n次的图上最小环板子. #include <cstdio> #include <cstring> #include <io ...

  10. RTX51 Tiny

    参考文档 :RTX51 Tiny 2.02 中文手册.doc.Keil_Rtx51_tiny_RTOS中文版.pdf RTX-51 有 2 个版本:Full 和 Tiny.类似的国人写的 Small ...