display

  • 版本网址缩略名: CSS/display
  • 版本标题: display
  • 版本 id: 170736
  • 创建于:
  • 创建者: 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 : This causes the element to generate a block box for the content and a separate list-item inline box.
  • compact : 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 compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the 'vertical-align' property value is relative to the block element.
  • 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'.

规范

浏览器兼容性

Browser Lowest Version
Internet Explorer 4
Netscape 4
Opera 3.5

The table-* values are supported in Firefox and ???.

The compact and run-in values are not supported in Firefox. They are supported in ???.

The inline-block and inline-table values are supported starting in Firefox 3 / Gecko 1.9. inline-block is also supported in ??? and inline-table is also supported in ???.

参见

{{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> : This causes the element to generate a block box for the content and a separate list-item inline box.
</li></ul>
<ul><li> <b>compact</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 compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the 'vertical-align' property value is relative to the block element.
</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>Browser</th>
    <th>Lowest Version</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>The <code>table-</code>* values are supported in Firefox and ???.
</p><p>The <code>compact</code> and <code>run-in</code> values are not supported in Firefox.  They are supported in ???.
</p><p>The <code>inline-block</code> and <code>inline-table</code> values are supported starting in Firefox 3 / Gecko 1.9.  <code>inline-block</code> is also supported in ??? and <code>inline-table</code> is also supported in ???.
</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" } ) }}
恢复到这个版本