隐藏与显示:display/visibility/visible区别
说到标签的隐藏,你们会用到什么呢?display?visibility?还是服务器控件的visible?
显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别:
<div style="display:">显示</div>
<div style="display:none;">隐藏不占位</div> <div style="visibility:">显示</div>
<div style="visibility:hidden;">隐藏占位</div> <div visible="true" runat="server">显示</div>
<div visible="false" runat="server">消失不占位</div>
说明:
1)display
隐藏必须使用none值,该隐藏不占位,页面源代码可见。
显示可使用空或block或inline,意思分别为:无此属性、显示视为DIV(有换行符)、显示视为span(无换行符)。
2)visibility
隐藏必须使用hidden值,该隐藏占位,页面源代码可见。
显示可使用空或visible,意思分别为:无此属性、显示。
3)visible(服务器控件)
隐藏必须使用false值与runat="server",该隐藏不占位,页面源代码不可见。
显示可使用空或true,意思分别为:无此属性、可见。
隐藏与显示:display/visibility/visible区别的更多相关文章
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- Display 和Visible 区别
一. web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意 1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后, ...
- js display, visible 区别
注意: display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别: display:none ---不为被隐藏的对象保 ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- display、visibility、visible区别
标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...
- CSS隐藏元素 display visibility opacity的区别
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; ...
- 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...
- css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来
display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...
- HTML 显示/隐藏DIV的技巧(visibility与display的差别)
参考链接:http://blog.csdn.net/szwangdf/article/details/1548807 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: ...
随机推荐
- Jquery_改变背景颜色
$(this).addClass("car_check").siblings().removeClass("car_check");//设置全部车辆为选中状态
- 使用升级助 升级了win10,黑屏,无桌面 解决方案
使用U盘重装即可. 事实证明,win10升级助手实在不咋地 优待又2: (1)保留原win7系统,有后悔药: (2)原系统的软件可用: 缺点: (1)装得慢,一上午: (2)开机慢,三分半 (3)开机 ...
- Mysql有两种存储引擎:InnoDB与Myisam
http://www.cnblogs.com/kevingrace/p/5685355.html
- (转)ConcurrentHashMap解析
原文地址:http://www.ibm.com/developerworks/cn/java/java-lo-concurrenthashmap/ ConcurrentHashMap 的结构分析 为了 ...
- michael的沟通秘籍
1 多准备几个邮件模板2 lower expectation over delivery less promise extra give3 involve resource earliar 尽早接手公 ...
- [转]Android WebView播放视频(包括全屏播放),androidwebview
Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...
- c time_t 和 oc NSDate 的转换
c time_t 和 oc NSDate 的转换 1:time_t 转 oc NSDate time_t some_time_t=NULL; NSDate *someDate = [NSDate da ...
- Java多线程基础:进程和线程之由来
转载: Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够 ...
- Android 使用dagger2进行依赖注入(基础篇)
0. 前言 Dagger2是首个使用生成代码实现完整依赖注入的框架,极大减少了使用者的编码负担,本文主要介绍如何使用dagger2进行依赖注入.如果你不还不了解依赖注入,请看这一篇. 1. 简单的依赖 ...
- CentOS7+JDK8编译Hadoop2.6.4
1. 下载相关软件 apache-maven-3.3.1-bin.tar.gz protobuf-2.5.0.tar.gz hadoop-2.6.4-src.tar.gz 2.配置好jdk8环境(请看 ...