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. openstack官方指导书

    openstack官方网站:https://docs.openstack.org/ 由于openstack的官方文档有点多,所以这里对其进行梳理一下 Release Notes 发布版本 新功能,升级 ...

  2. 转载TCP-IP协议解释

    本文转载自 http://www.ruanyifeng.com/blog/2009/03/tcp-ip_model.html TCP/IP模型是互联网的基础, 理解 TCP/IP对理解互联网至关重要 ...

  3. 多列组合为主键(PRIMARY KEY)

    在表中,想把其中2列或多列作为组合主键. CREATE TABLE [dbo].[T3] ( ) NOT NULL, ) NOT NULL, ) NULL, ) NULL ) GO ALTER TAB ...

  4. SQL中SUM函数和CASE WHEN联合使用

    SELECT SUM(case WHEN sex=1 then 1 else 0 end )as '男生', SUM(case when sex =2 then 1 else 0 end )'女生'F ...

  5. 脚本执行JavaScript代码

    下面是一个具体的demo测试脚本引擎,执行javas文件. package Rhino; import java.io.FileReader;import java.net.URL; import j ...

  6. 最优化理论-Simplex线性规划

     Sorry,各位,现在这里面啥也没,之所以开这篇文章,是防止以后用得到:现在研究这些,总感觉有些不合适,本人还不到那个层次:如果之后有机会继续研究simplex-线性规划问题,再回来参考下面的链接进 ...

  7. es6 reduce的用法

    一.forEach回调函数参数,item(数组元素).index(序列).arr(数组本身)循环数组,无返回值,不改变原数组不支持return操作输出,return只用于控制循环是否跳出当前循环 二. ...

  8. 手机端处理布局rem

    方法一 if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 docum ...

  9. 洛谷P2285 [HNOI2004]打鼹鼠

    P2285 [HNOI2004]打鼹鼠 题目描述 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某 ...

  10. 77%的Linux运维都不懂的内核问题

    前言 之前在实习时,听了 OOM 的分享之后,就对 Linux 内核内存管理充满兴趣,但是这块知识非常庞大,没有一定积累,不敢写下,担心误人子弟,所以经过一个一段时间的积累,对内核内存有一定了解之后, ...