visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。可以保存下面的代码看看效果:
具体步骤:
代码示例:

<div style="border:1px solid #000;background:#eee">
< span style="width:200;height:200;visibility:hidden"></span>
←SS属性为visibility:hidden的对象
</div><br>
< div style="border:1px solid #000;background:#666">
< span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
</div>

特别提示
       用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。

特别说明

display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
none 隐藏元素,不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。
inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。
list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)
table-header-group 将元素作为表格标题组显示,相当于tHead元素。
table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。
visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:
inherit 继承父元素的visibility属性设置。
hidden 隐藏元素,但保留其所占空间。
visible 显示元素(默认值)。

div 显示与隐藏的更多相关文章

  1. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  3. div显示和隐藏

    它是实现比较简单.style.display控制层隐藏或显示属性. <html> <body> <script> function show(){ document ...

  4. js控制div显示与隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 根据class操作div显示与隐藏

    <div class="otherComment" > <!-- style="display:none" --> 测试 </di ...

  6. setTimeout应用例子-移入移出div显示和隐藏

    效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></ ...

  7. 通过select下拉框里的value控制div显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 在jsp页面嵌入java代码让某些div显示或者隐藏

    <!--监测评价人显示评价人信息 --> <% if("D3".equals(role_flag)){%> <div id="crud&qu ...

  9. div显示与隐藏及height()函数

    总结与网络 1. $("#id").show()表示display:block,$("#id").hide()表示display:none; $("# ...

随机推荐

  1. 网易新闻优化APK下载链接

    你好,欢迎你的访问! 本次是APK包的下载链接: 点我下载 这是我目前实现的效果,正在完善中...

  2. cocos2d-html5 笔记3: Node

    Cocos2d采用类似于Dom tree的那种形式来各个部分组织起来.最基本的基类是Node吧, Node Node 作为基类,函数很多,我觉得可以分为如下几类,树相关的函数, 一些公共的比较实用的函 ...

  3. innodb 变量

    http://dev.mysql.com/doc/refman/5.7/en/innodb-parameters.html

  4. 为VS2010默认模板添加版权信息 .

    通过以下方式可以自定义CS类文件代码模板(以下为VS2010,VS2008类似): 1,打开VS的安装目录,例如 D:\Program Files\Microsoft Visual Studio 10 ...

  5. scala目录

    1. 使用Scala(构建这样一个应用,它会取回一份列表,其中包括用户持有的股票的代码以及股份,并告知他们在当前日期为止的这些投资的总价.这包含了几件事:获取用户输入.读文件.解析数据.写文件.从We ...

  6. 基于jquery tool实现的windows桌面效果

    今天给大家分享一款基于jquery tool实现的windows桌面效果.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: ...

  7. ios----protocol, optional ,delegate

    ios----protocol,delegate     protocol——协议 协议是用来定义对象的属性,行为和用于回调的. 协议中有两个关键字@private和@optional,@privat ...

  8. cocosbuilder中使用字体描边时,字符重叠,间距过小问题

    cocosbuilder中使用字体描边时,字符重叠,间距过小问题 cocos2d-x 3.7 v3.7解析cocosbuilder中描边字体的代码如下: void LabelTTFLoader::pa ...

  9. 关于js-binding中Layer触摸事件的优化

    关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

  10. 【阿里云产品公测】云引擎ACE java DEMO 直接部署体验

    作者:阿里云用户啊里新人 本来想根据前几个哥们的公测文章,体验一下,发现他妈的都是php的一下我就,,好吧还有群,群里高手如云,,看着文档(其实文档写的很清晰了!只不过我太懒了!)   哈哈,所以群里 ...