css中visibility和visible的区别是什么

html-css028

css中visibility和visible的区别是什么,第1张

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

CSS visibility 属性规定元素是否可见。

visible 元素可见。

hidden 元素不可见。

collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。

inherit 从父元素继承 visibility 属性的值。

你在 html 里面写的东西默认情况下就是属于 visibility:visible 即元素可见。当某些情况下,你让元素不可见了:visibility:hidden 再通过一些事件触发后让元素变成可见,就要用到这个visibility:visible。

和display:none的区别,你理解是对的,display:none以后,元素是不占位的。