再谈visibility:hidden和display:none

最新推荐文章于 2024-06-05 00:48:32 发布

我的前端学习笔记

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量1.3k

点赞数

分类专栏：技术文章标签： display visibility none hidden

本文链接：https://blog.csdn.net/u012181244/article/details/40743243

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

之前写过一篇有关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" οnclick="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，那就再写篇有关两者的总结吧。