再谈visibility:hidden和display:none

最新推荐文章于 2024-11-01 00:19:18 发布

转载最新推荐文章于 2024-11-01 00:19:18 发布 · 409 阅读

前端专栏收录该内容

41 篇文章

订阅专栏

本文详细解释了CSS中display:none与visibility:hidden的区别，包括它们如何影响DOM树布局及元素可见性，并通过示例代码展示了实际效果。

原文链接：http://blog.youkuaiyun.com/u012181244/article/details/40743243

之前写过一篇有关visibility:hidden和display:none的文章：为什么要用用visibility:hidden;代替display:none;？主要是从浏览器性能方面入手，却没写两者的主要区别，今天补充。

首先display:none,这个none会把元素从dom树中“摘除”，这时其他元素会立马填充该元素的位置，也就是说一旦设置为none，这个元素是真的不存在了。

而visibility:hidden,它就像一块“抹布”，把花花绿绿的元素都擦成透明色，透明到我们看不到，但元素依然存在。就像一块玻璃虽然透明到我们看不到，但依然存在占领着原来就拥有的空间，不会像display:none;一样从dom树上摘除。这就是我目前阶段所理解的。

以下是段小代码，效果立竿见影：

<html>  
<head>  
<style>  
</style>  
<script language="JavaScript">  
    function toggleDisplay(me){  
        if (me.style.display=="block"){  
            me.style.display="inline";  
            alert("Text is now 'inline'.");  
            }  
        else {  
            if (me.style.display=="inline"){  
                me.style.display="none";  
                alert("Text is now 'none'. It will reappear in three seconds.");  
                window.setTimeout("blueText.style.display='block';",3000,"JavaScript");  
                }  
            else {  
                me.style.display="block";  
                alert("Text is now 'block'.");  
                }  
            }  
        }  
</script>  
    <body>  
        <div>  
                Click on the <span id="blueText" onclick="toggleDisplay(this)"   
            style="color:blue;position:relative;cursor:hand;">blue text</span> to   
            see how it affects the flow.  
        </div>  
    </body>  
</html>

下面是各个属性值：

display的属性值有block，inline，none。先说block，前端攻城师都能信手捏来一大批块级元素和行内元素，这两种元素的根本区别在于其display属性的默认值，倘若display属性的默认值是block，如<div>，那么很明显那它天生就是块级元素，如果默认为inline，如<span>那很顺其自然就是行内元素，因此，行内元素和块级元素可以通过改变其默认的display属性值来相互转换，也就是说把<div>设为display:inline;那么它也立马成为行内元素，同样<span>设为display:block;也会变成块级元素。

visibility的属性值有：visible,hidden,collapse,inherit.

visible为默认属性，元素可见。

hidden如上所述，隐藏不可见（擦成透明，不显示但依然占有空间）

clooapse用于表格，作用与hidden一样。

inherit表示遵从父元素的visibility属性值，即继承自父元素。

说起inherit那就不得不提auto，那就再写篇有关两者的总结吧。