body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}html, body{ }h1 { font-size:1.5em; font-weight:bold;}h2 { font-size:1.4em; font-weight:bold;}h3 { font-size:1.3em; font-weight:bold;}h4 { font-size:1.2em; font-weight:bold;}h5 { font-size:1.1em; font-weight:bold;}h6 { font-size:1.0em; font-weight:bold;}img { border:0; max-width: 100%;}blockquote { margin-top:0px; margin-bottom:0px;}table { border-collapse:collapse; border:1px solid #bbbbbb;}td { border-collapse:collapse; border:1px solid #bbbbbb;}css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

CSS中的display和visibility

css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。
谈们的属性分别如下：

display:none|block;
display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。
dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。（把100块钱重新从抽屉里那出来放回桌子上）

visibility：hidden|visible;
visibility:hidden;隐藏该元素，正真的隐藏，但他还占有那块空间。这时，（桌子上有100块钱，这是我盖了桌布把他隐藏起来，钱还在那里）。
visibility:visible;让元素显示（拿掉了桌布，看到了100块钱）。

接下来用代码来举个例子，代码：
<html>
<head>
<script type="text/javascript">
function testDisplay()
{
    var divD = document.getElementById("testD");
    if(divD.style.display=="none")
    {
        divD.style.display = "block";
    }
    else
    {
        divD.style.display = "none";
    }
}

function testVisibility()
{
    var divV = document.getElementById("testV");
    if(divV.style.visibility =="hidden")
    {
        divV.style.visibility ="visible";
    }
    else
    {
        divV.style.visibility = "hidden";
    }
}
</script>
</head>
</body>
<div id="testD" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Display
        </div>
    </div>
</div>
<div id="testV" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Visibility
        </div>
    </div>
</div>
<input type="button" value="TestDisplay" onclick="testDisplay()"/>
<input type="button" value="TestVisibility" onclick="testVisibility()"/>
</body>
</html>

运行一下框中的代码就可以看到，当testD隐藏时，里面所有的框都隐藏，而且下面的divV和按钮都上移，而当divV隐藏的时候，只有他自己隐藏了，里面的其他元素都没有隐藏。（这里主要是把里面的div元素style属性设置为display和visible，如果去掉也会隐藏，但是，按钮还是不会上移，可以试一下。）

css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET的更多相关文章

  1. Ubuntu下deb包的安装方法 - kevinhg的博客 - 博客频道 - CSDN.NET

    Ubuntu下deb包的安装方法 - kevinhg的博客 - 博客频道 - CSDN.NET dpkg -i

  2. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

  3. 控制div显示隐藏（有文字图片介绍）

    <div class="toggle"> <p id="zi">收起</p> <p id="zhe" ...

  4. ThinkPHP实现定时执行任务的两种方法 - 博客频道 - CSDN.NET

    在平常的项目中我们总是会遇到需要将某个方法任务定时执行的问题,定时执行方法任务如果我们拥有服务器的权限,我们可以直接在服务器设置定时任务,例如在Windows的任务计划程序中进行设置,在Linux中编 ...

  5. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  6. 多个div独立控制其显示/隐藏

    今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...

  7. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  8. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  9. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

随机推荐

  1. Explain of Interaction Operators in UML?

    来源于:EA 中的 Interaction Operators Enterprise Architect User Guide Operator Action alt Divide up intera ...

  2. cakephp2.3.0 lib中的Model.php有一个bug

    1. cakephp2.3.0 lib中的Model.php有一个bug, 加上 !empty($db->config['prefix']) 这个判断更好.有时候会少进行一次 new PDO() ...

  3. php 数据库并发处理

    在并行系统中并发问题永远不可忽视.尽管PHP语言原生没有提供多线程机制,那并不意味着所有的操作都是线程安全的.尤其是在操作诸如订单.支付等业务系统中,更需要注意操作数据库的并发问题. 接下来我通过一个 ...

  4. 织梦DEDE文章列表前面自动加递增数字标签

    实现的办法很简单,只须要在序号递增的处所加上这段代码就行 [field:global runphp=""yes"" name=autoindex][/field ...

  5. [转]慎用InputStream的read()方法

    InputStream 此抽象类是表示字节输入流的所有类的超类. 我们从输入流中读取数据最常用的方法基本上就是如下 3 个 read() 方法了: 1 . read () 方法,这个方法 从输入流中读 ...

  6. 使用RPM包安装、配置和拆卸MySQL

    通过rpm包安装.配置及卸载mysql的详细过程. 以MySQL-server-4.0.14-0.i386.rpm为例,放在/usr/src目录下 cd /usr/src rpm -ivh MySQL ...

  7. Extjs视频

    Extjs视频http://www.youku.com/playlist_show/id_19343298.html ExtJs视频教程(关东升) 智捷关东升老师ExtJs视频教程AJAX框架-Ext ...

  8. Android如何使用API

    转自:http://www.cnblogs.com/vanezkw/archive/2012/07/03/2574559.html 本文针对Android开发如何使用API文档进行一些经验分享. 1. ...

  9. hdu_4897_Little Devil I(树链剖分)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4897 题意:有三种操作,1是在树上的两个节点之间的路径改变当前的颜色,2是改变树上有且只有一个端点在u ...

  10. Linux 挂载aliyun数据盘

    适用系统:Linux(Redhat , CentOS,Debian,Ubuntu) *  Linux的云服务器数据盘未做分区和格式化,可以根据以下步骤进行分区以及格式化操作. 下面的操作将会把数据盘划 ...