mozilla

版本 170738 / display

  • 版本网址缩略名: CSS/display
  • 版本标题: display
  • 版本 id: 170738
  • 创建于:
  • 创建者: TigerSoldier
  • 是否是当前版本?
  • 评论 /* 浏览器兼容性 */

修订内容

{{template.CSSRef()}}

摘要

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

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

  • {{template.Xref_cssinitial()}}: {{template.Cssxref("inline")}}
  • 应用范围: 所有元素
  • {{template.Xref_cssinherited()}}: 否
  • 百分数: N/A
  • 媒体: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}: as specified, except for root element, floated elements, and absolutely positioned elements (see ???)

Syntax

display: <display-value> | {{template.Cssxref("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.). {{template.Fx_minversion_inline(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. {{template.Fx_minversion_inline(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.

示例

{{template.CSSRefExampleLink("display")}}

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

注释

  • CSS1 一致性: 浏览器可能会错误地忽略 display 属性并用浏览器默认值代替。
  • 在 CSS1 中此属性的默认值为 block,在 CSS2 中则改为 inline
"Block" Versus "In-line" Elements
  • Block-level elements create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings. 'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'
  • In-line elements do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. 'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.

规范

浏览器兼容性

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

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

Firefox 不支持 compactrun-in,支持这两个值的浏览器有???。

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

参见

{{template.Cssxref("visibility")}}, {{template.Cssxref("float")}}, {{template.Cssxref("position")}}


{{ wiki.languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display" } ) }}

修订版来源

<p> 
{{template.CSSRef()}}
</p>
<h3 name=".E6.91.98.E8.A6.81"> 摘要 </h3>
<p>这个属性指定元素所使用的渲染盒(rendering box)类型。在 HTML 这类的语言中,元素的行为都得到了完整的定义,其默认的“display”属性取决于 HTML 规范所描述的行为或浏览器/用于的默认样式表。在 XML 这类没有定义显示行为的语言中,其默认值为“inline”。
</p><p>除了众多已定义的显示盒类型外,还有一个名为“none”的值用于隐藏元素,而且此元素的所有子元素都会被隐藏。文档的显示效果与此元素不存在于文档树中的效果相同。这个值功能强大,但是应当小心使用。
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("inline")}}
</li><li> 应用范围: 所有元素
</li><li> {{template.Xref_cssinherited()}}: 否
</li><li> 百分数: N/A
</li><li> 媒体: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}:  as specified, except for root element, <a href="cn/CSS/float">floated</a> elements, and <a href="cn/CSS/position">absolutely positioned</a> elements (see ???)
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<p><code>display:</code>  &lt;display-value&gt; | {{template.Cssxref("inherit")}}
</p>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;display-value&gt; </dt><dd> The Display Value can be any of the following values.
</dd></dl>
<ul><li> <b>inherit</b> : 与其父元素的属性相同。
</li></ul>
<ul><li> <b>none</b> : 隐藏元素(令其不影响布局);它的所有子元素都将无条件隐藏。文档显示效果和该元素不在文档树中的效果相同。要想让元素在隐藏的同时占据其原有的位置,请参见 {cssxref|visibility} 属性。
</li></ul>
<ul><li> <b>inline</b> : 将元素变成一个或多个行内(inline)元素盒。
</li></ul>
<ul><li> <b>block</b> : 将元素变成一个块型(block)元素盒。
</li></ul>
<ul><li> <b>inline-block</b> : 由 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.). {{template.Fx_minversion_inline(3)}}
</li></ul>
<ul><li> <b>list-item</b> : 为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。
</li></ul>
<ul><li> <b>compact</b> : 取决于上下文,display 属性的这个值可能会创建一个行内盒,也可能会创建一个块状盒。不同的情况下会对紧凑(compact)元素应用不同的 CSS 属性。在块型盒中,compact 元素显示在块型元素的左边距(margin)或右边距中。compact 元素会影响所在行的行高计算,其“vertical-align”属性的值是与块型元素的相对值。
</li></ul>
<ul><li> <b>run-in</b> : 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.
</li></ul>
<ul><li> <b>table-header-group|table-footer-group</b> : These values cause the element to behave like the corresponding THEAD and TFOOT HTML table elements which these values take their name from.
</li></ul>
<ul><li> <b>table</b> : 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.
</li></ul>
<ul><li> <b>inline-table</b> : 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. {{template.Fx_minversion_inline(3)}}
</li></ul>
<ul><li> <b>table-caption</b> : 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.
</li></ul>
<ul><li> <b>table-cell</b> : 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.
</li></ul>
<ul><li> <b>table-row|table-row-group</b> : 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.
</li></ul>
<ul><li> <b>table-column|table-column-group</b> : 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.
</li></ul>
<h3 name=".E7.A4.BA.E4.BE.8B"> 示例 </h3>
<p>{{template.CSSRefExampleLink("display")}}
</p>
<pre>Ext/Doc: p  { display: block }
In-Line:  &lt;p STYLE="display: block"&gt;text&lt;/p&gt;
</pre>
<h3 name=".E6.B3.A8.E9.87.8A"> 注释 </h3>
<ul><li> CSS1 一致性: 浏览器可能会错误地忽略 <code>display</code> 属性并用浏览器默认值代替。
</li><li> 在 CSS1 中此属性的默认值为 <code>block</code>,在 CSS2 中则改为 <code>inline</code>。
</li></ul>
<h5 name=".22Block.22_Versus_.22In-line.22_Elements"> "Block" Versus "In-line" Elements </h5>
<ul><li> <b>Block-level elements</b> create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings. 'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'
</li></ul>
<ul><li> <b>In-line elements</b> do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. 'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.
</li></ul>
<h3 name=".E8.A7.84.E8.8C.83"> 规范 </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1</a>
</li></ul>
<h3 name=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7"> 浏览器兼容性 </h3>
<table class="standard-table">
  <tbody><tr>
    <th>浏览器</th>
    <th>最低版本</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<p>支持 <code>table-</code>* 的浏览器有 Firefox 和 ???。
</p><p>Firefox 不支持 <code>compact</code> 和 <code>run-in</code>,支持这两个值的浏览器有???。
</p><p>支持 <code>inline-block</code> 和 <code>inline-table</code> 的浏览器有 Firefox 3 / Gecko 1.9。同样支持 <code>inline-block</code> 的浏览器有???,支持 <code>inline-table</code> 的浏览器有???。
</p>
<h3 name=".E5.8F.82.E8.A7.81"> 参见 </h3>
<p>{{template.Cssxref("visibility")}}, {{template.Cssxref("float")}}, {{template.Cssxref("position")}}
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display" } ) }}
恢复到这个版本