关于CSS属性中visibility隐藏和display消失的区别简析

当html元素被设置为display:none;后，浏览器不会解析该元素，“none”就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了，“hidden”也就是隐藏了，但是它所在的位置仍然还在，就像你把你个文件给隐藏了，但是这个文件在你的硬盘中

了解Css的人应该都知道display:none;和visibility:hidden;之间的一些区别，当html元素被设置为display:none;后，浏览器不会解析该元素，“none”就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了，“hidden”也就是隐藏了，但是它所在的位置仍然还在，就像你把你个文件给隐藏了，但是这个文件在你的硬盘中仍然是占据一定空间的，只是你看不见而已。 
对使用display:none;的元素，浏览器不会去解析，搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略，而且屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。 
而对使用visibility:hidden;的元素，虽然隐藏了，但位置仍在，给人的感觉是“占着茅坑布拉斯”，要配合position:relative和position:absolute一起来用，没有display:none;那么简单、灵活。就另外一点，visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好，因为display在切换可见性时会产生reflow，它要重新构建frame，当然要比visibility:visible慢。 
如果你以上两种方法都不想要的话，可以写一个类： 

复制代码

代码如下:

.hidden{ 
overflow: hidden; 
width: 0; 
height: 0; 
border:none; 
} 

就是采用overflow隐藏，然后把元素的基本属性值设置为最小或无，当然，如果你要显示的话，还得写另一个相应的类。 
CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置： 

复制代码

代码如下:

<script language="JavaScript"> 
function toggleVisibility(me)...{ 
if (me.style.visibility=="hidden")...{ 
me.style.visibility="visible"; 
} 
else ...{ 
me.style.visibility="hidden"; 
} 
} 
</script> 

<div οnclick="toggleVisibility(this)" style="position:relative"> 
This example displays text that toggles between a visibility of 'visible' and 'hidden'. 
Note the behavior of the next line.</div><div>This second line shouldn't 
move, since visibility retains its position in the flow</div> 

复制代码

代码如下:

<script language="JavaScript"> 
function toggleVisibility(me){ 
if (me.style.visibility=="hidden"){ 
me.style.visibility="visible"; 
} 
else{ 
me.style.visibility="hidden"; 
} 
} 
</script> 

<div οnclick="toggleVisibility(this)" style="position:relative"> 
This example displays text that toggles between a visibility of 'visible' and 'hidden'. 
Note the behavior of the next line.</div><div>This second line shouldn't 
move, since visibility retains its position in the flow</div> 
注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。 
注意当一个元素被隐藏时，不能接受任何事件，因此上例中当<div>被隐藏后，不能再接受鼠标点击事件，所以再点击该控件位置不能再次显示控件。Display属性的作用则有所不同，visibility隐藏元素，但是却为该元素预留位置，而display实际是设置该元素的属性。例如任何display设置为block的元素都被视为一个单独的块儿，这时的<SPAN>会象<DIV>一样工作，而当display属性设置为inline时该元素将变成一个单列的元素，这时的<DIV>也会象<SPAN>一样工作。最后，如果一个元素的display属性被设置为none，那么这个元素实际上将彻底从输出流中去除，并且其后的所有元素将提到前面对的位置。 

复制代码

代码如下:

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

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