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. 笨方法学python--提问

    1 实现 用户在终端进行输入 的方法 print "how old are you?", age = raw_input() 该地方,第1名后面加逗号,然后必须换行 2 若要限制用 ...

  2. 笨方法学python--变量和命名

    1 =(单等号)和==(双等号)的区别 =用来赋值, ==用来判断是否相等 2 x = 100 在操作符2侧加空格,易读 3 打印时,进行字符串拼接 print "there are&quo ...

  3. IOS 中常用站位符

      CGPoint.CGRect等可以转化为字符串打印出来 如:   NSLog(@"-------------%@",NSStringFromCGPoint(point));   ...

  4. PHP基本类型操作

    //关键字对大小写不敏感echo ('hello world!<br>');ECho ('hello world<br>');eCho ('hello world<br& ...

  5. 推荐 iOS 网站：

    0. https://developer.apple.com/videos/1. http://www.raywenderlich.com2. http://nshipster.com3. http: ...

  6. 转：全面剖析C#正则表达式

    到目前为止,许多的编程语言和工具都包含对正则表达式的支持,当然.NET也不例外,.NET基础类库中包含有一个名称空间和一系列可以充分发挥规则表达式威力的类.         正则表达式的知识可能是不少 ...

  7. HDU 5479 Scaena Felix

    水题,括号匹配,有几对匹配了,答案就是那个... #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  8. 解决phpmyadmin 点击表结构时卡顿、一直加载、打不开的问题

    本文内容是转自其它站点,亲测可用. 第一步,打开 ./version_check.php文件,找到以下代码: $save = true; $file ='http://www.phpmyadmin.n ...

  9. jq的遍历节点

    1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...

  10. Linux下find命令用法小结

    find是个使用频率比较高的命令.常常用它在系统特定目录下,查找具有某种特征的文件. find命令的格式:find [-path……] -options [-print -exec -ok] path ...