技術分享 使用CSS visibility屬性控制內容顯示
作者：52css
你對CSS中visibility屬性的用法是否了解，這里和大家分享一下，它主要用來設置或檢索是否顯示對象，當visibility屬性取值為hidden時，只是改變了元素的可見性，元素所占有的空間依然存在。
本文和大家重點討論一下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>
[可先修改部分代碼再運行查看效果]
【編輯推薦】
責任編輯：佚名
來源：
52css.com
