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; $("# ...
随机推荐
- 为您的Android,iOS等应用加入声波传输功能
记得12年左右的时候,美国出现了chirp应用,该应用能够使用声波在iphone手机间传输文本,图片.甚至视频.当时认为非常高大上. 再后来,到13年的时候国内也出现了非常多声波应用.比方支付宝的声波 ...
- 写一个自己定义进度颜色和圆形转动的ProgressBar(具体介绍)
先上图: 我们得自己定义ProgressBar的样式 <span style="white-space:pre"> </span><style nam ...
- 【剑指offer】Q18:树的子结构
类似于字符串的匹配,我们总是找到第一个匹配的字符,在继续比較以后的字符是否所有同样,假设匹配串的第一个字符与模式串的第一个不同样,我们就去查看匹配串的下一个字符是否与模式串的第一个同样,相应到这里,就 ...
- How to Install and Configure Nginx from Source on centos--转
1.CentOS - Installing Nginx from source http://articles.slicehost.com/2009/2/2/centos-installing-ngi ...
- 代码片段------find批量处理
应用案例: 当前目录下有若干目录,有多个目录下有一个名叫build.sh的脚本,但是没有可执行权限,现在要将所有的build.sh假如可执行权限. pengdl@debian:~/work/SDK_3 ...
- 从零开始学JAVA(05)-连接数据库MSSQL(JDBC代码篇)
MSSQL的JDBC驱动下载好以后就可以写代码了. 1.新建项目,项目名为SqlJdbc.新建类,类名为SqlTest,同时勾选public static void main(String[] arg ...
- 开启AsyncTask从网络加载图片
/*AsyncTask 异步任务即做一些简单的异步处理 :是handle与线程池的封装 * 第一个泛型:参数类型泛型 * 第二个泛型:更新进度泛型 * 第三个泛型:onProgressUpdate的返 ...
- Override Inline Styles with CSS
inline style: <div style="background: red;"> The inline styles for this div should m ...
- [经典算法] 排列组合-N元素集合的所有子集(一)
题目说明: 给定一组数字或符号,产生所有可能的集合(包括空集合),例如给定1 2 3,则可能的集合为:{}.{1}.{1,2}.{1,2,3}.{1,3}.{2}.{2,3}.{3}. 题目解析: 如 ...
- iOS 谓词讲解
1.NSPredicate (1)比较运算符 1.比较运算符 > .< .== . >= .<= . != 运算符还可以跟逻辑运算符一起使用,&& , || ...