技术分享使用CSS visibility属性控制内容显示-51CTO.COM

本文和大家重点讨论一下CSS中visibility属性的用法，visibility是一个不可继承的属性，如果希望对象为可视，其父对象也必须是可视的，它主要用来设置或检索是否显示对象。

CSS使用visibility属性控制内容显示

什么是CSS的visibility属性？

　　设置或检索是否显示对象。

　　请区别与display属性不同，此属性为隐藏的对象保留其占据的物理空间。也就是说：

　　visibility属性取值为hidden时，只是改变了元素的可见性，元素所占有的空间依然存在。

　　visibility是一个不可继承的属性，如果希望对象为可视，其父对象也必须是可视的。

CSS的visibility属性有些哪取值？

　　inherit：继承上一个父对象的可见性

　　visible：对象可视

　　hidden：对象隐藏

　　collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

我们看下面的一个例子来理解visibility属性：

　　我们在文字中插入一个图片，请注意文字与图片的位置。

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;
charset=gb2312"/> 
<title>52CSS</title> 
<styletypestyletype="text/css"> 
*{margin:0;padding:0;font-size:13px;color:#000;}  
#test{width:300px;margin:20pxauto;background:#ccc;}  
</style> 
</head> 
<body> 
<dividdivid="test"> 
我爱CSS-Web标准化Div+css教程<imgsrcimgsrc=
"http://www.52css.com/skins/logo3.gif" 
alt="52CSS.com"/>至力于Web标准在中国的应用及发展  
</div> 
</body> 
</html>

[可先修改部分代码再运行查看效果]

【编辑推荐】

技术分享 使用CSS visibility属性控制内容显示

技术分享使用CSS visibility属性控制内容显示