div 显示与隐藏
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 显示与隐藏的更多相关文章
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
- div显示和隐藏
它是实现比较简单.style.display控制层隐藏或显示属性. <html> <body> <script> function show(){ document ...
- js控制div显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 根据class操作div显示与隐藏
<div class="otherComment" > <!-- style="display:none" --> 测试 </di ...
- setTimeout应用例子-移入移出div显示和隐藏
效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></ ...
- 通过select下拉框里的value控制div显示与隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 在jsp页面嵌入java代码让某些div显示或者隐藏
<!--监测评价人显示评价人信息 --> <% if("D3".equals(role_flag)){%> <div id="crud&qu ...
- div显示与隐藏及height()函数
总结与网络 1. $("#id").show()表示display:block,$("#id").hide()表示display:none; $("# ...
随机推荐
- TP复习3
## ThinkPHP 3.1.2 CURD特性#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲: 一.ThinkPHP 3 的CURD介绍 (了解) 二. ...
- [Node.js] Broswerify -- 1
Browserify is a tool that brings node.js style development to the browser. The thing you can see on ...
- 防止IE缓存jquery ajax 内容
转自:http://blog.163.com/haijun_huang/blog/static/167591377201201235754763/ 解决办法: 方法一:把type改成post,并随便设 ...
- Eclipse中R文件不能自动生成
R文件不能自动生成主要是因为编译有错误,这时你想什么办法都是没有用的,clean, fix properties,都不是从根上解决问题. R文件主要是自动生成资源文件的id的,里边静态子类 ...
- lucene和egg项目的异同点
1 和lucene一样 支持全域索引 2 对字符串域提供全文检索,对数字类型域提供范围查询 3 采取和lucene类似的倒排表压缩方式 4 和lucene的多级跳转表不同,egg采取的是B+树做索引, ...
- 虚拟机Linux和Windows之间互传文件的好帮手WinSCP
WinSCP下载地址:http://download.pchome.net/internet/ftp/down-34064-1.html 安装很简单,这里就不做介绍.下面是启动后的界面: 在主机名(H ...
- Spring Mvc返回html页面404错误解决记录--转载
原文地址:http://53873039oycg.iteye.com/blog/2061992 以前使用Spring Mvc时候都是返回jsp页面或者ftl页面,昨天想返回html页面,spring- ...
- CentOS7 安装Docker报错
安装报错: Transaction check error: file /usr/lib/systemd/system/blk-availability.service from install o ...
- 编译linux内核以及depmod的使用
转载:http://blog.lmtw.com/b/18215/archives/2010/71074.html depmod(depend module) 功能说明:分析可载入模块的相依性. 语 法 ...
- Free download SKP900 update tool & activation tool
One of the SKP900 key programmer user failed to get the SKP900 upgraded and add free tokens online u ...