大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：
第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。
因为visibility会保留元素的位置，所以第二行不会移动.
效果：
第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。
因为visibility会保留元素的位置，所以第二行不会移动. 注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像
元素一样，它会在那个点被放入到页面中。(实际上你可以设置的display:block，使其可以像
一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如
，它也将会被组合成像那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果： 例：
在style="color:blue;position:relative;cursor:hand;">蓝色文字上点击来查看效果.
分享到：
相关推荐
Display的属性值 block：/*表现为...将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如，它也将会被组合成像那样的输出流。none:/*元素不可见，并且不为其保留相应的位置*/最后是display被
本文实例讲述了jQuery可见性过滤器：hidden和：visibility用法。分享给大家供大家参考。具体分析如下： :hidden 匹配所有不可见元素，如果使用css的visibility属性让元素不显示但是占位，则不属于hidden了 查找...
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility...
示例描述：本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向.html 设置文字的移动方向。 图片的移动.html 设置图片的移动。 设置移动对象.html 设置设置...
clearfix的定义： 复制代码代码如下: .clearfix:after {}{ content: ...注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/ line-height: 0; /**//*行高为0；*/ height: 0; /**/
display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/ .clearfix:after {visibility: hidden;display...
//显示的信息，可以使用HTML语法，注意引号用法，单套双。 var message='<b><font size=5 face=arial color=red>请点击进入本站</a></font></b>' //背景色 var backgroundcolor="#eeffee" //0 代表信息永远显示，1...
不可见元素也将不被考虑，其中包括具有不透明度的元素：0，display：none和visibility：hidden。 结果将按照适用的字符数对所有使用的字体系列值进行排序。即。最常用的一个将在结果列表的顶部。 支持语言:English
display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;} 这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器...