visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征,
虽然它们都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
visibility属性:
确定元素显示还是隐藏;
visibility="visible|hidden",visible显示,hidden隐藏。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
例如:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
.one{
width:100px;
height:100px;
background:blue;
visibility:hidden;
}
.two{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="one">文本将会触发"hidden"属性,注意第二行的变化。</div>
<div class="two">第二行</div>
</body>
</html>
visibility会保留元素的位置,所以第二行不会移动.
注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一行代码成为"hidden"的时候,就不能再接收响应到事件了。
visibility还有一个inherit值,继承父级的visibility值,默认就是该值。如果不想使用默认的,则重新设置子级的visibility。
例如:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
.father{
width:300px;
height:300px;
background:blue;
visibility:hidden;
}
.son{
width:100px;
height:100px;
background:yellow;
visibility:visible;
}
.brother{
width:300px;
height:300px;
background:green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<div class="brother">
</div>
</body>
</html>
display属性:
就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
其中block和none值最常用。
block:默认值。
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<DIV>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<DIV>一样工作。
inline:
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<DIV>,它也将会被组合成像<span>那样的输出流。
none:
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。
例如:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
ul>li{
list-style-type:none;
}
div{
display:none; /*将此元素隐藏*/
/*display:inline; 将此元素转换为内联元素(span),用处不大。*/
/*display:block; 将此元素设置为块级元素(默认值),正常显示。*/
}
</style>
<script>
function show(){
document.getElementById("menu").style.display="block";
}
function hide(){
document.getElementById("menu").style.display="none";
}
</script>
</head>
<body>
<ul>
<li οnmοusemοve="show();" οnmοuseοut="hide();">鼠标移动到这里显示内容</li>
</ul>
<div id="menu">
<a href="#">熊出没</a>
<a href="#">喜洋洋</a>
<a href="#">海绵宝宝</a>
</div>
</body>
</html>