搜索

CSS中visibility和display的区别

发布网友 发布时间:2022-04-21 10:03

我来回答

4个回答

热心网友 时间:2022-04-06 12:53

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

热心网友 时间:2022-04-06 14:11

visibility 即使隐藏了他所占的位置会留下空白,display不会再一个display可以控制一个标签的级别,display:block(将元素转换成块级的),inline(将元素转换成行类及的) 用display控制元素的显示的时候最好使用display="";不要用block,

热心网友 时间:2022-04-06 15:46

visibility是一个换行的标识符,display不是。你用个html测试一下就知道了。建议你不要用visibility,而用display.

热心网友 时间:2022-04-06 17:37

visibility还会占个位置,display就不会
声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:11247931@qq.com
Top