说到标签的隐藏,你们会用到什么呢?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区别的更多相关文章

  1. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  2. Display 和Visible 区别

    一.   web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意   1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后, ...

  3. js display, visible 区别

    注意: display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别: display:none ---不为被隐藏的对象保 ...

  4. 基础总结(04)-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  5. display、visibility、visible区别

    标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...

  6. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  7. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  8. css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来

    display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...

  9. HTML 显示/隐藏DIV的技巧(visibility与display的差别)

    参考链接:http://blog.csdn.net/szwangdf/article/details/1548807 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: ...

随机推荐

  1. Mysql的一些小知识点

    MySQL简介:是由瑞典的MySQL AB公司开发的,目前是Oracle(甲骨文)公司扥一个关系型数据库产品(2008年MySQL AB公司被Sun公司收购,2009年Sun公司又被 Oracle公司 ...

  2. 深入理解JVM虚拟机-2自动内存管理机制

    java虚拟机所管理的内存将会包括一下几个运行时数据区域. 程序计数器: 程序计数器是一块较小的内存空间.字节码解析式工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令,分支.循环.跳转 ...

  3. Libsvm:脚本(subset.py、grid.py、checkdata.py) | MATLAB/OCTAVE interface | Python interface

    1.脚本 This directory includes some useful codes: 1. subset selection tools. (子集抽取工具) subset.py 2. par ...

  4. VB6 GDI+ 入门教程[5] 基础绘图小结

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[5] 基础绘图小结 2009 年 6 月 18 日 4条 ...

  5. Sql Server中通配符的使用

    Sql Server中通配符的使用 通配符_ "_"号表示任意单个字符,该符号只能匹配一个字符."_"可以放在查询条件的任意位置,且只能代表一个字符.一个汉字只 ...

  6. 腾讯云centos 7部署 dotnetcore+Angular2 实践

    版权声明:本文由屈政斌原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/239 来源:腾云阁 https://www.qclo ...

  7. tcp服务的测试程序开源

    开源的是一个测试客户端,可以用来检验服务器端程序的并发处理能力. 使用方法为: python epolltest.py --host=192.168.15.128 --port=8809 --degr ...

  8. android上传文件到wamp服务器

    1.php server(wamp)部分 建立unload.php页面代码如下 <?php move_uploaded_file($_FILES["file1"][" ...

  9. Win7下Maven的安装与配置

    简介  官网:https://maven.apache.org/ Apache Maven,是一个(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(Pro ...

  10. [redis] 征服Redis系列

    征服 Redis:简介+安装+调优+测试+主从+集群 征服 Redis + Jedis:简单Jedis+池化Jedis+集群Jedis 征服 Redis + Jedis + Spring (一)—— ...