CSS：display 和 visibility 的异同

学习笔记总结，主要说明display 和 visibility 的异同，同时延伸了一些与之相关的实际应用场景问题。

一、

相同点：都可以使元素隐藏。屏幕阅读设备无法读取到被隐藏的元素

不同点：

　　display，隐藏后不参与页面布局。

　　visibility，隐藏后仍参与页面布局。优点，可以在不妨碍元素显示角色的情况下显示或隐藏他们。

二、例子

CSS：

 <style type="text/css">
        .hide {
            display: none;
        }

        .hide2 {
            visibility: hidden;
        }
</style>

页面：

<body>
　　我们是<span id='mySpan' class="hide">共产主义接班人</span>...测试中间部分是否占位
　　<br />
　　我们是<span class="hide2">共产主义接班人</span>...测试中间部分是否占位
</body>

显示结果：

可以看到两者的区别，使用了visibility属性的部分，虽然隐藏了文字但仍参与了页面布局。

三、JS的一些操作

js操作dispaly属性的两种方式：

1.display设置为none或''（空字符串）隐藏或显示

2.通过操作一个class隐藏或显示

 var obj = document.getElementById('mySpan');

 //第一种方法：display设置为none或''
 obj.style.display = 'none';
 obj.style.display = '';

 //第二种方法：通过操作一个class隐藏、显示
 $("#mySpan").addClass("hide");
 $("#mySpan").removeClass("hide");

四、

如果将元素移出屏幕，又想让屏幕阅读器发现元素，怎么做？

可以使用绝对定位，将元素偏离出屏幕，如下示例：

css：

.hide {
            position: absolute;
            top: -10000em;
            left: -10000em;
        }

html：

    <p>第一句话：Three years ago, if these two quarterbacks met in this game</p>
    <p class="hide" id="p2">第二句话:Three years ago, if these two quarterbacks met in this game</p>
    <p>第三句话:Three years ago, if these two quarterbacks met in this game</p>

显示结果：

第二个p元素部分已经不可见。

如果要将元素显示回来的话，有三种方法：

第一种方法：绝对定位，将偏移量设置为0即可，如下

.show {
            top: 0;
            left: 0;
        }

第二种方法：将position属性设置为默认值“static”，在静态定位中top、left属性会被忽略掉，所以此时不用再指定top、left属性

.show2 {
            position: static;
        }

第三种方法：将一个元素移回到正常的文档流中，但是还需要让它作为一个包含块来包含其他元素，就可用这种方式。（当要绝对定位一些元素，并且这些元素还包含在你想移回屏幕元素的内部时可参考这用方法）

 .show3 {
            position: relative;
            top: 0;
            left: 0;
        }

五、Display的应用举例

比如，当a标签被放置li标签内时，为了让a的边框与li的边框相同，可使用display属性实现：

html:

<li id="link"><a href="http://xxx.com/">abc</a></li>

CSS：

display:block;