有关CSS特性中visibility掩藏和display消退的差别简析

日期:2021-03-11 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

掌握Css的人应当都了解display:none;和visibility:hidden;之间的1些差别,当html元素被设定为display:none;后,访问器不容易分析该元素,“none”便是沒有,消退了,因此他不容易再文本文档流中占位。而visibility:hidden;仅仅是视觉效果上消退了,“hidden”也便是掩藏了,可是它所属的部位依然还在,就像你把你个文档给掩藏了,可是这个文档在你的电脑硬盘中依然是占有1定室内空间的,只是你看看不到罢了。
对应用display:none;的元素,访问器不容易去分析,检索模块将会会觉得被掩藏的文本属于废弃物信息内容而被忽视,并且显示屏阅读文章器(是为视觉效果上有阻碍的人设计方案的载入显示屏內容的程序流程)会忽视被掩藏的文本。
而对应用visibility:hidden;的元素,尽管掩藏了,但部位仍在,给人的觉得是“占着茅坑布拉斯”,要相互配合position:relative和position:absolute1起来用,沒有display:none;那末简易、灵便。就此外1点,visibility:hidden;变换为visibility:visible跟display:none;变换为display:block;特性好些,由于display在切换可见性时会造成reflow,它要再次搭建frame,自然要比visibility:visible慢。
假如你以上两种方式都不要想的话,能够写1个类:

拷贝编码
编码以下:

.hidden{
overflow: hidden;
width: 0;
height: 0;
border:none;
}

便是选用overflow掩藏,随后把元素的基础特性值设定为最少或无,自然,假如你要显示信息的话,还得写另外一个相应的类。
CSS中的visibility和display两个特性很非常容易被搞混,由于它们看起来是做一样的事儿,但具体上,这两个特性是彻底不一样的。 visibility特性用来设定1个给定的元素是不是显示信息(visibility="visible|hidden"),可是,尽管1个元素的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特性更有效,大部分状况下在掩藏文本的情况下要将有关的元素做相应的调整(比如树构造)。
留意当1个元素被掩藏时,不可以接纳任何恶性事件,因而上例中当<div>被掩藏后,不可以再接纳电脑鼠标点一下恶性事件,因此再点一下该控制部位不可以再度显示信息控制。Display特性的功效则有一定的不一样,visibility掩藏元素,可是却为该元素预留部位,而display具体是设定该元素的特性。比如任何display设定为block的元素都被视作1个独立的块儿,这时候的<SPAN>会象<DIV>1样工作中,而当display特性设定为inline时该元素将变为1个单列的元素,这时候的<DIV>也会象<SPAN>1样工作中。最终,假如1个元素的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>