display

  • 版本网址缩略名: CSS/display
  • 版本标题: display
  • 版本 id: 170735
  • 创建于:
  • 创建者: TigerSoldier
  • 是否是当前版本?
  • 评论 New page: <breadcrumbs></breadcrumbs> __NOTOC__ {{CSSRef}} == 摘要 == This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements hav...

修订内容

{{template.CSSRef()}}

摘要

This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default 'display' property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is 'inline'.

In addition to the many different allowed display box types, one other value, "none", allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution.

  • {{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>This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default 'display' property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is 'inline'.
</p><p>In addition to the many different allowed display box types, one other value, "none", allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution. 
</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" } ) }}
恢复到这个版本