CSS技术:解释visibility与display的区别 Unknown 2009/05/23

| |

在CSS中,有两个属性,都是与元素显示相关的,一个是大家熟悉的visibility,另一个则是display(你可能已经见到过display:block或类似的用法)。但是我发觉我把他们混淆了,所以今天特此发文比较一下,希望对大家有用。

visibility用于设置元素是否可见或不可见。

可选属性值:inherit | visible | hidden | collapse

  • inherit: 继承上一级父对象的可见性。
  • visible: 元素是可见的。
  • hidden: 元素是不可见的。即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
  • collapse: 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。

visibility这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

此CSS属性也可以通过Javascript动态地改变。如:obj.style.visibility="visible" | "hidden" | "collapse"。

display用于设置如何显示元素。

可选属性值:none | block | inline | inline-block | list-item | run-in | table | inline-table | ...

  • none 此元素不会被显示。
  • block 此元素将显示为块级元素,此元素前后会带有换行符。
  • inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
  • inline-block 行内块元素。(CSS2.1 新增的值)
  • list-item 此元素会作为列表显示。
  • run-in 此元素会根据上下文作为块级元素或内联元素显示。
  • compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
  • marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
  • table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
  • inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
  • table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
  • table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
  • table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
  • table-row 此元素会作为一个表格行显示(类似 <tr>)。
  • table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
  • table-column 此元素会作为一个单元格列显示(类似 <col>)
  • table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
  • table-caption 此元素会作为一个表格标题显示(类似 <caption>)

display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

此CSS属性也可以通过Javascript动态地改变。如:obj.style.display="none" | "block" | "inline" | ...


作为总结,以下两句话我想对于想彻底隐藏一些元素的朋友非常有用!

display:none 隐藏对象。隐藏对象其物理空间。 <-想彻底隐藏的朋友应该选用这个。
visibility:hidden 隐藏对象。保留其占据的物理空间。

请给这篇日志评个分吧~!

本文评分: 5.8/10 (12 votes)    提示:您还未对本文评分,您可以进行评分并发表您的意见!

加入收藏!

发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [注册]