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属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。
CSS visibility 属性规定元素是否可见。visible 元素可见。
hidden 元素不可见。
collapse 在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 从父元素继承 visibility 属性的值。
你在 html 里面写的东西默认情况下就是属于 visibility:visible 即元素可见。当某些情况下，你让元素不可见了：visibility:hidden 再通过一些事件触发后让元素变成可见，就要用到这个visibility:visible。
和display:none的区别，你理解是对的，display:none以后，元素是不占位的。
实现div隐藏可以通过设置display、visible和div的大小等实现隐藏效果。cssdisplay属性display属性规定元素应该生成的框的类型。值为none时，此元素不会被显示。/*示例*/div{display:none}cssvisibility属性
visibility属性规定元素是否可见。值为hidden时表示元素是不可见的。/*示例*/div{visible:hidden}提示:visible:hidden和display:none的区别是，即使不可见的元素也会占据页面上的空间。"display"属性可以用来创建不占据页面空间的不可见元素。(visible和display属性的其他可能值可在w3school查看)。设置div的大小实现隐藏
将div的宽度和高度设置为零，也可以达到隐藏的效果。/*示例*/div{width：0pxheight:0pxoverflow:hidden/*规定当内容溢出元素框时隐藏。防止div大小设置为零，里面的文本却还是显示。*/}
