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. 隐藏时间表ribbon按钮

    Ribbon.ContextualTabs.Timesheet.Home.Share;Ribbon.ContextualTabs.Timesheet.Home.ShowHide;Ribbon.Cont ...

  2. ENFP喜欢的职业

    外向(E)+直觉(N)+情感(F)+知觉(P). 1. 设计:设计本身很能满足ENFP对工作的各种要求,但是有个附加条件就是,这份工作不能让ENFP长时间的一个人工作,没机会和别人交流,也就是说有一个 ...

  3. Tomcat访问程序外的上传文件

    自己在编写程序时,把图片上传到程序根目录下,但是页面使用<img> 没有显示.但是,当我刷新项目下文件夹后,页面刷新可以显示. 我通过网上查询,当在Tomcat下的server.xml配置 ...

  4. jdbcTemplate简单使用

    package com.bizvane.spider.tools; import org.apache.commons.dbcp.BasicDataSource; import org.springf ...

  5. ue4 碰撞检测测试

    记录几条物理相关 测试条件,1使用setActorLocation移动,3使用控制器的移动 1 moveCube  2 targetCube  3 Character 两个Cube的碰撞事件 1和2的 ...

  6. codevs 3333 高级打字机

    3333 高级打字机   题目描述 Description 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作 ...

  7. mac 修改mysql 密码， navicat 连接失败原因

    1.cd /usr/local/mysql/bin/
2.sudo su输入之后会要求输入你的计算机密码,输入的时候是什么都不显示的,输完后回车 3. ./mysqld_safe --skip-gra ...

  8. CC07:清除行列

    题目 请编写一个算法,若N阶方阵中某个元素为0,则将其所在的行与列清零. 给定一个N阶方阵int[][](C++中为vector>)mat和矩阵的阶数n,请返回完成操作后的int[][]方阵(C ...

  9. 7.数据处理函数 ---SQL

    大多数SQL实现支持以下类型的函数. 用于处理文本字符串(如删除或填充值,转换值为大写或小写)的文本函数. 用于在数值数据上进行算术操作(如返回绝对值,进行代数运算)的数值函数. 用于处理日期和时间值 ...

  10. Vue实例生命周期+vueRoter

    Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...