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. MPEG1的码流层次与各层次的作用

    1. 序列层(Sequence layer) 序列层主要用于为随机播放提供全局参数支持,这些参数包括图像宽高.像素高宽比.帧率.码率.VBV大小.帧内量化矩阵.帧间量化矩阵. 2. 图像组层(Grou ...

  2. OpenGL———混合的基本知识

    混合是一种常用的技巧,通常可以用来实现半透明.但其实它也是十分灵活的,你可以通过不同的设置得到不同的混合结果,产生一些有趣或者奇怪的图象.混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一 ...

  3. shell 空格问题

    1.定义变量时, =号的两边不可以留空格. eg: gender=femal------------right gender =femal-----------wrong gender= femal- ...

  4. 【转】ethtool 命令详解

    命令描述: ethtool 是用于查询及设置网卡参数的命令. 使用概要:ethtool ethx       //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0.eth1等等etht ...

  5. iOS 6 Passbook 入门 1/2

    http://www.raywenderlich.com/zh-hans/23066/ios-6-passbook-%E5%85%A5%E9%97%A8-12 iOS 6 Passbook 入门 1/ ...

  6. windows程序设计学习笔记（一）

    windows里的变量类型 1.简单重定义windows变量 BOOL (TRUE FALSE) INT UINT(32位,4字节) LONG DWORD(32位,4字节) lParam,wParam ...

  7. js表单提交，判断文本框，用户名密码是否为空，JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  8. 学习笔记——策略模式Strategy

    策略模式,与模板模式一样,都是为了将接口和算法实现解耦,但策略模式更主要是整体算法的替换,而模板模式主要是流程一致,部分算法的替换. 个人理解为,一般算法替换,使用策略模式,当算法流程一致,可以提取为 ...

  9. Linux学习 -- Shell基础 -- 概述

    Shell是什么? 命令解释器 编程语言 Linux支持的Shell类型 cat /etc/shells 主要学习 bash 脚本执行方式 echo echo -e 单引号 -- 原始字符串  双引号 ...

  10. Oracle sql优化之分析函数优化标量子查询

    待优化语句如下 select a.code as code, a.m_code as m_code,a.stktype as f_stype,a.e_year as e_year, b.sname a ...