Question

CSS中visibility和display的区别

CSS中visibility:hidden和display:none有什么区别？

Answer 1

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 onclick="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 onclick="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属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。

Answer 2

visibility 即使隐藏了他所占的位置会留下空白，display不会再一个display可以控制一个标签的级别，display：block（将元素转换成块级的），inline（将元素转换成行类及的） 用display控制元素的显示的时候最好使用display="";不要用block，

Answer 3

visibility是一个换行的标识符，display不是。你用个html测试一下就知道了。建议你不要用visibility,而用display.

Answer 4

visibility还会占个位置，display就不会