最近工作中用到了显示和隐藏——visibility和display，它们两个都有显示隐藏的意思，但是又有所差别，接下来我们先看一下效果吧。

当没有效果的时候，我们展示一下源码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        body, table {

            font-size: 12px;

        }

        table {

            table-layout: fixed;

            empty-cells: show;

            border-collapse: collapse;

            margin:  auto;

        }

        td {

            height: 30px;

            width: 556px;

        }

        h1, h2, h3 {

            font-size: 12px;

            margin: ;

            padding: ;

        }

        .table {

            border: 1px solid #cad9ea;

            color: #;

        }

            .table th {

                background-repeat: repeat-x;

                height: 30px;

            }

            .table td, .table th {

                border: 1px solid #cad9ea;

                padding:  1em ;

            }

            .table tr.alter {

                background-color: #f5fafe;

            }

    </style>

</head>

<body>

    <table class="table">

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

首先，先看一下visibility：hidden和visibility：visible

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        body, table {

            font-size: 12px;

        }

        table {

            table-layout: fixed;

            empty-cells: show;

            border-collapse: collapse;

            margin:  auto;

        }

        td {

            height: 30px;

            width: 556px;

        }

        h1, h2, h3 {

            font-size: 12px;

            margin: ;

            padding: ;

        }

        .table {

            border: 1px solid #cad9ea;

            color: #;

        }

            .table th {

                background-repeat: repeat-x;

                height: 30px;

            }

            .table td, .table th {

                border: 1px solid #cad9ea;

                padding:  1em ;

            }

            .table tr.alter {

                background-color: #f5fafe;

            }

    </style>

</head>

<body>

    <table class="table">

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr style="visibility:hidden">

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

上面这段代码在页面中显示的效果：上设置visibility属性为hidden，第二行会消失——也就是我们说的隐藏。但在页面上保留该元素的空间。

总结visibility特性：

 visibility:visible    ——元素可见，默认值
 visibility:hidden   ——元素不可见，但仍然为其保留相应的空间。使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
visibility:collapse   ——只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden
visibility:inherit     ——继承上级元素的visibility值
js的style.visibility  ——

将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。
                                将元素visibility属性设为 visible，显示元素内容。

接着，看一下display：none和display：block

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        body, table {

            font-size: 12px;

        }

        table {

            table-layout: fixed;

            empty-cells: show;

            border-collapse: collapse;

            margin:  auto;

        }

        td {

            height: 30px;

            width: 556px;

        }

        h1, h2, h3 {

            font-size: 12px;

            margin: ;

            padding: ;

        }

        .table {

            border: 1px solid #cad9ea;

            color: #;

        }

            .table th {

                background-repeat: repeat-x;

                height: 30px;

            }

            .table td, .table th {

                border: 1px solid #cad9ea;

                padding:  1em ;

            }

            .table tr.alter {

                background-color: #f5fafe;

            }

    </style>

</head>

<body>

    <table class="table">

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr style="display:none">

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

当第二行设置为display：none的时候，第二行会消失并且原来所在的位置变成第三行。当设置为display：block，又会显示出来。

总结display：

block：
表现为一个块级元素（一般情况下独占一行）
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:
表现为一个行级元素（一般情况下不独占一行）
将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none:
元素不可见，并且不为其保留相应的位置
最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

Display的使用
1、display默认属性值为块级的元素：
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
2、display默认属性值为none的元素：
br,frame,nextid,tbody,tfoot,thead
3、li元素的display属性默认值为：list-item
4、其他元素display属性默认值都为inline

Display的特性

改变元素的display属性将对周围元素造成的影响有：
1、在属性值设为block的元素后面添加新行
2、从属性值设为inline的元素所在行中删除一行
3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替

display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

display:none:
1、JS读取元素属性值
如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、SEO优化时需要注意
使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、样式文件
如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

style.display

将元素display属性设为 block，会在该元素后换行。
将元素display属性设为 inline，会消除元素换行。
将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。

总结——visibility和display的更多相关文章

  1. visibility和display的异同

    都有隐藏节点的作用. visibility:hidden; display:none; (1)visibility 规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的 ...

  2. visibility，display区别

    visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失

  3. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

  4. 表单元素（控件）不可见，你用visibility还是display？(转)

    属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...

  5. CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...

  6. visibility和display的区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...

  7. CSS visibility与display 属性

    所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...

  8. transition与visibility与display

    http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/ 术语解释是: visibility: 离散步骤 ...

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

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

随机推荐

  1. APK扩展文件及使用

    转自:http://blog.csdn.net/myarrow/article/details/7760579 一.APK扩展文件基本知识 Android Market (Google Play St ...

  2. BP神经网络算法学习

    BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学家小组提出,是一种按误差逆传播算法训练的多层前馈网络,是眼下应用最广泛的神经网络模型之中的一个 ...

  3. wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  4. 【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架 你最喜欢Backbone or Ember

    http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发, ...

  5. Eclipse启动Tomcat时，45秒超时解决方案

    在Eclipse中启动Tomcatserver时,常常因为系统初始化项目多,导致出现45秒超时的Tomcatserver启动错误,出现以下的错误. 曾经我们一般通过找到XML配置文件,将相应Timeo ...

  6. 位图字体生成工具Bitmap Font Generator的使用

    首先,说下为什么要使用这款工具作为cocos2d-x的字体生成工具.其实cocos2d-x能使用的字体生成工具也有好几个,当然了本人也没有全部使用过,就不一一说明了.Bitmap Font Gener ...

  7. oc-24-点语法

    /** 点语法的本质是方法的调用,而不是访问成员变量,当使用点语法时, 编译器会自动展开成相应的方法.切记点语法的本质是转换成相应的set和get方法, 如果没有set和get方法,则不能使用点语法. ...

  8. 深入学习PHP内核

    http://www.php-internals.com/  深入学习PHP内核 http://www.php-internals.com/book/ http://www.kancloud.cn/@ ...

  9. 压缩工具和整盘备份工具dd

    一.使用gzip压缩文件 gzip是GNU zip的缩写. [命令格式] gzip [option] filename [常用选项] c:压缩后将结果输出到标准输出,并保留原始文件. d:解压缩文件. ...

  10. Qt组件中的双缓冲无闪烁绘图

      双缓冲绘图在Qt4中,所有的窗口部件默认都使用双缓冲进行绘图.使用双缓冲,可以减轻绘制的闪烁感.在有些情况下,用户要关闭双缓冲,自己管理绘图.下面的语句设置了窗口部件的Qt::WA_PaintOn ...