关于CSS属性中visibility隐藏和display消失的区别简析_ Div+Css教程-查字典教程网
关于CSS属性中visibility隐藏和display消失的区别简析
关于CSS属性中visibility隐藏和display消失的区别简析
发布时间:2016-12-27 来源:查字典编辑
摘要:了解Css的人应该都知道display:none;和visibility:hidden;之间的一些区别,当html元素被设置为display...

了解Css的人应该都知道display:none;和visibility:hidden;之间的一些区别,当html元素被设置为display:none;后,浏览器不会解析该元素,“none”就是没有,消失了,所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了,“hidden”也就是隐藏了,但是它所在的位置仍然还在,就像你把你个文件给隐藏了,但是这个文件在你的硬盘中仍然是占据一定空间的,只是你看不见而已。

对使用display:none;的元素,浏览器不会去解析,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

而对使用visibility:hidden;的元素,虽然隐藏了,但位置仍在,给人的感觉是“占着茅坑布拉斯”,要配合position:relative和position:absolute一起来用,没有display:none;那么简单、灵活。就另外一点,visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好,因为display在切换可见性时会产生reflow,它要重新构建frame,当然要比visibility:visible慢。

如果你以上两种方法都不想要的话,可以写一个类:

.hidden{

overflow: hidden;

width: 0;

height: 0;

border:none;

}

就是采用overflow隐藏,然后把元素的基本属性值设置为最小或无,当然,如果你要显示的话,还得写另一个相应的类。

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

注意当一个元素被隐藏时,不能接受任何事件,因此上例中当<div>被隐藏后,不能再接受鼠标点击事件,所以再点击该控件位置不能再次显示控件。Display属性的作用则有所不同,visibility隐藏元素,但是却为该元素预留位置,而display实际是设置该元素的属性。例如任何display设置为block的元素都被视为一个单独的块儿,这时的<SPAN>会象<DIV>一样工作,而当display属性设置为inline时该元素将变成一个单列的元素,这时的<DIV>也会象<SPAN>一样工作。最后,如果一个元素的display属性被设置为none,那么这个元素实际上将彻底从输出流中去除,并且其后的所有元素将提到前面对的位置。

<script language="JavaScript">

function toggleDisplay(me)...{

if (me.style.display=="block")...{

me.style.display="inline";

alert("Text is now 'inline'.");

}

else ...{

if (me.style.display=="inline")...{

me.style.display="none";

alert("Text is now 'none'. It will reappear in three seconds.");

window.setTimeout("blueText.style.display='block';",3000,"JavaScript");

}

else ...{

me.style.display="block";

alert("Text is now 'block'.");

}

}

}

</script>

<div>Click on the <span id="blueText" onclick="toggleDisplay(this)"

style="color:blue;position:relative;cursor:hand;">blue text</span> to

see how it affects the flow.</div>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类