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

开发 前端
你对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

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

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

 【编辑推荐】

  1. CSS Sprites对CSS布局的意义
  2. 如何使用CSS框架这把双刃剑?
  3. CSS中font-size属性值四大种类
  4. 解析四大CSS属性值选择器用法
  5. 专家推荐 DIV CSS表单布局的五个小技巧
责任编辑:佚名 来源: 52css.com
相关推荐

2010-09-07 16:21:37

CSSDisplayVisibility

2010-08-24 13:05:23

CSS超链接

2010-09-16 10:29:47

DisplayVisibilityCSS

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2010-08-23 10:11:22

CSSfloatJavaScript

2010-09-14 13:11:43

DIVdisplayvisibility

2010-09-16 09:58:44

CSS display

2010-09-06 10:21:15

CSS 列表

2010-08-30 12:54:59

CSSmargin

2010-08-17 15:15:40

CSSIE8

2024-03-29 06:32:46

CSSJavaScript前端

2010-09-10 10:47:47

CSSposition

2010-08-31 13:14:41

CSSoverflow

2010-09-02 12:54:30

CSS

2010-09-08 11:11:50

CSS样式CSS

2010-08-23 10:30:05

CSS超链接

2010-05-31 20:07:31

SVN版本控制插件

2010-09-13 14:32:39

CSS横向导航

2010-08-27 09:29:40

CSSbehavior

2010-09-08 12:37:27

displayCSS
点赞
收藏

51CTO技术栈公众号