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. 【240】◀▶IEW-Unit05

    Unit 5 Education: Study Abroad 表格技巧讲解 1. Model1对应表格分析 This table shows the numbers of international ...

  2. C#闪动任务栏的方法

    用FlashWindowEx可以实现窗口的闪烁,结构如下: /// <summary> /// 闪烁窗口 /// </summary> /// <param name=& ...

  3. error: field has incomplete type

    在头文件使用某一自定义的类的指针或引用时,只需要前置声明该类即可,然而如果该类中有静态成员时,必须包含该类的头文件,而不是使用前置声明．

  4. php array数组（第一部分）

    创建一个数组 <?php $arr = array("My","name","is","zhangsan"); e ...

  5. WordPress博客搭建指南

    WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.Alexa排行前100万的网站中有超过16.7%的网站使用WordPre ...

  6. Razor的主版页面框架

    类似于2.0版本中的MasterPage主版页面框架,不过mvc3.0推出的RazorView内建的主版页面语法与原本的webFormview的MasterPage相差甚远   1,Razor的页面执 ...

  7. 通过ssh X11转发使用远程gui程序

    ssh协议可以转发X11数据, 从而达到使用远程gui程序的功能, 假定现在有 客服端 C :192.168.0.13 服务器 S :192.168.0.200 首先确保在客服端C 上能够通过 ssh ...

  8. Node.js 内置模块fs的readdir方法 查看某个文件夹里面包含的文件内容

    fs.readdir(path[, options], callback) 例: "use strict"; const fs = require("fs"); ...

  9. java利用URL发送get和post请求

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  10. 剑指Offer的学习笔记（C#篇）-- 对称的二叉树

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 一 . 题目分析 递归法. 一.空树判断,单独搞出来. 二.非空树. 递归:一 ...