display与visiblity的区别.docVIP

DIV层样式中display属性与visiblity的区别 大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的，这用visibility=visible|hidden来表示（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第一行文本将会触发hidden和visible属性，注意第二行的变化。/div div因为visibility会保留元素的位置，所以虽然第一行看不见了但位置还在，第二行内容不会上下移动。/div --------------------------------------------------------------- 解释：注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为hidden的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。 --------------------------------------------------------------- 另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像div元素一样，它会在那个点被放入到页面中。(实际上你可以设置span的display:block，使其可以像div一样工作。 将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如div，它也将会被组合成像span那样的输出流。 -------------------------------------------------------------- 例子：- script language=JavaScript function toggleDisplay(me){ if (me.style.display==block){ me.style.display=inline; alert(文本现在是：inline.); } else { if (me.style.display==inline){ me.style.display=none; alert(文本现在是:none. 3秒钟后自动重新显示。); window.setTimeout(blueText.style.display=block;,3000,JavaScript); } else { me.style.display=block; alert(文本现在是:block.); } } } /script div在span id=blueText onclick=toggleDisplay(this) style=color:blue;position:relative;cursor:hand;蓝色/span文字上点击来查看效果./div --------------------------------------------------------------- 最后是display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。） --------------------------------------------------------------- display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例： h1dis