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. mynotebook

    www.linux.org/threads/beats-audio-on-linux.4443/ askubuntu.com/questions/303775/envy-15-beats-audio- ...

  2. 省市便利 UIPicherView

    @property (strong,nonatomic) UIPickerView *pickerV; @property (strong,nonatomic) NSArray *arr; @prop ...

  3. wpf无法加载程序集的元数据 可能已从web下载

    wpf无法加载程序集的元数据 可能已从web下载     别人写的wpf程序,源代码放到自己电脑上,设计器加载出现问题:无法加载程序集“XXX”的元数据. 解除锁定步骤:找到你的dll->右键属 ...

  4. 【转】哦，mysql 的其它发行版本Percona， mariadb

    原文:http://geek.csdn.net/news/detail/130146 2016年11月25日,沃趣科技"智慧应用 数据先行"2016产品发布会暨新三板挂牌庆祝会在杭 ...

  5. 解决oracle数据库连接不上的问题

    今天打开部署好的java开发的网站系统,反应好慢,第一反应就是后台有问题. 查看tomcat一堆的报错信息,重启还是存在. 使用plSql连接数据库看看,登录提示如下:ORA-12514:TNS:监听 ...

  6. openURL in APP Extension

    var responder = self as UIResponder? while (responder != nil){ if responder!.respondsToSelector(Sele ...

  7. json-c代码示例

    #include <stdio.h> #include <string.h> #include <json.h> int main(int argc,char ** ...

  8. java 数据流

    Example10_11.java import java.io.*; public class Example10_11 { public static void main(String args[ ...

  9. 转：Java eclipse下 Ant build.xml实例详解

    在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...

  10. 激活OFFICE2010时,提示choice.exe不是有效的win32程序

    我在安装office2010破解版时,提示choice.exe不是有效的win32应用程序 删除choice.exe再激活,按提示找到目录删掉这个文件,需要设置显示隐藏文件夹