Skip to main content

Visit Mozilla.org

CSS:display

From MDC

« CSS 参考

[编辑] 摘要

这个属性指定元素所使用的渲染盒（rendering box）类型。在 HTML 这类的语言中，元素的行为都得到了完整的定义，其默认的“display”属性取决于 HTML 规范所描述的行为或浏览器/用于的默认样式表。在 XML 这类没有定义显示行为的语言中，其默认值为“inline”。

除了众多已定义的显示盒类型外，还有一个名为“none”的值用于隐藏元素，而且此元素的所有子元素都会被隐藏。文档的显示效果与此元素不存在于文档树中的效果相同。这个值功能强大，但是应当小心使用。

[编辑] Syntax

display: <display-value> | inherit

[编辑] Values

<display-value> 
The Display Value can be any of the following values.
  • inherit : 与其父元素的属性相同。
  • none : 隐藏元素（令其不影响布局）；它的所有子元素都将无条件隐藏。文档显示效果和该元素不在文档树中的效果相同。要想让元素在隐藏的同时占据其原有的位置，请参见 {cssxref|visibility} 属性。
  • inline : 将元素变成一个或多个行内（inline）元素盒。
  • block : 将元素变成一个块型（block）元素盒。
  • inline-block : 由 CSS 2.1 引入。 This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.). New in Firefox 3
  • list-item : 为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。
  • compact : 取决于上下文，display 属性的这个值可能会创建一个行内盒，也可能会创建一个块状盒。不同的情况下会对紧凑（compact）元素应用不同的 CSS 属性。在块型盒中，compact 元素显示在块型元素的左边距（margin）或右边距中。compact 元素会影响所在行的行高计算，其“vertical-align”属性的值是与块型元素的相对值。
  • run-in : Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the run-in element. Properties for the run-in element are inherited from its parent element in the document tree, not from the block element box it participates in.
  • table-header-group|table-footer-group : These values cause the element to behave like the corresponding THEAD and TFOOT HTML table elements which these values take their name from.
  • table : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
  • inline-table : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML. New in Firefox 3
  • table-caption : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
  • table-cell : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
  • table-row|table-row-group : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.
  • table-column|table-column-group : These values cause the element to behave like the corresponding HTML table element which these values take their name from. The 'inline-table' value does not have a direct mapping in HTML.

[编辑] 示例

View Live Examples 

Ext/Doc: p  { display: block }
In-Line:  <p STYLE="display: block">text</p>

[编辑] 注释

  • CSS1 一致性: 浏览器可能会错误地忽略 display 属性并用浏览器默认值代替。
  • 在 CSS1 中此属性的默认值为 block，在 CSS2 中则改为 inline。

[编辑] “块（Block）”元素与“行内（In-line）”元素的区别

  • 块级元素（Block-level elements）会为其内容（在视图上下文中）创建一个在垂直方向上排他的元素块——一般会在内容的前后换行。只有将 display 指定为此类值的元素可以自由地指定它所在的位置。块型元素的显示效果与 BLOCKQUOTE、DIV、标题（H1、H2、……）等 HTML 元素的显示效果相同。会产生块型元素的 display 属性值有：block、list-item、table、compact 和 run-in。
  • 行内元素（In-line elements）不会为其内容创建单独的块；元素用行框显示（内容分散在连续的行中）。行内行为效果与实际或虚拟字符格式设置、非浮动图像以及未标记内容等 HTML 元素相同。以下“Display”属性值会创建行内元素。“inline”、“inline-table”、“compact”和“run-in”。

[编辑] 规范

[编辑] 浏览器兼容性

浏览器 最低版本
Internet Explorer 4
Netscape 4
Opera 3.5

支持 table-* 的浏览器有 Firefox 和 ???。

Firefox 不支持 compact 和 run-in，支持这两个值的浏览器有???。

支持 inline-block 和 inline-table 的浏览器有 Firefox 3 / Gecko 1.9。同样支持 inline-block 的浏览器有???，支持 inline-table 的浏览器有???。

[编辑] 参见

visibility, float, position

取自"http://developer.mozilla.org/cn/docs/CSS:display"