CSS中visibility和display的区别

2025-03-10 20:56:02

推荐回答（2个）

回答1：

CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。
visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置：
language="JavaScript">
function
toggleVisibility(me){
if
(me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else
{
me.style.visibility="hidden";
}
}
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.

This
second
line
shouldn't
move,
since
visibility
retains
its
position
in
the
flow

language="JavaScript">
function
toggleVisibility(me){
if
(me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else{
me.style.visibility="hidden";
}
}

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.

This
second
line
shouldn't
move,
since
visibility
retains
its
position
in
the
flow

注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。
明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。

回答2：

Vue实践-CSS样式position/display/float属性对比使用