mozilla

版本 170740 / display

  • 版本网址缩略名: CSS/display
  • 版本标题: display
  • 版本 id: 170740
  • 创建于:
  • 创建者: TigerSoldier
  • 是否是当前版本?
  • 评论 /* “块型(Block)”元素与“行内(In-line)”元素的区别 */
标签: 

修订内容

{{ CSSRef() }}

摘要

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

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

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

Syntax

display: <display-value> | {{ 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.). {{ 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. {{ 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.

示例

{{ CSSRefExampleLink("display") }}

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 指定为此类值的元素可以自由地指定它所在的位置。块型元素的显示效果与 BLOCKQUOTEDIV、标题(H1H2、……)等 HTML 元素的显示效果相同。会产生块型元素的 display 属性值有:blocklist-itemtablecompactrun-in
  • 行内元素(In-line elements)不会为其内容创建单独的块;元素用行框显示(内容分散在连续的行中)。行内行为效果与实际或虚拟字符格式设置、非浮动图像以及未标记内容等 HTML 元素相同。以下“Display”属性值会创建行内元素。“inline”、“inline-table”、“compact”和“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 的浏览器有???。

参见

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


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

修订版来源

<p> {{ CSSRef() }}
</p>
<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> 摘要 </h3>
<p>这个属性指定元素所使用的渲染盒(rendering box)类型。在 HTML 这类的语言中,元素的行为都得到了完整的定义,其默认的“display”属性取决于 HTML 规范所描述的行为或浏览器/用于的默认样式表。在 XML 这类没有定义显示行为的语言中,其默认值为“inline”。
</p><p>除了众多已定义的显示盒类型外,还有一个名为“none”的值用于隐藏元素,而且此元素的所有子元素都会被隐藏。文档的显示效果与此元素不存在于文档树中的效果相同。这个值功能强大,但是应当小心使用。
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("inline") }}
</li><li> 应用范围: 所有元素
</li><li> {{ Xref_cssinherited() }}: 否
</li><li> 百分数: N/A
</li><li> 媒体: {{ Xref_cssvisual() }}
</li><li> {{ 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 id="Syntax" name="Syntax"> Syntax </h3>
<p><code>display:</code> &lt;display-value&gt; | {{ Cssxref("inherit") }}
</p>
<h3 id="Values" 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.). {{ 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. {{ 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 id=".E7.A4.BA.E4.BE.8B" name=".E7.A4.BA.E4.BE.8B"> 示例 </h3>
<p>{{ CSSRefExampleLink("display") }}
</p>
<pre>Ext/Doc: p  { display: block }
In-Line:  &lt;p STYLE="display: block"&gt;text&lt;/p&gt;
</pre>
<h3 id=".E6.B3.A8.E9.87.8A" 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 id=".E2.80.9C.E5.9D.97.EF.BC.88Block.EF.BC.89.E2.80.9D.E5.85.83.E7.B4.A0.E4.B8.8E.E2.80.9C.E8.A1.8C.E5.86.85.EF.BC.88In-line.EF.BC.89.E2.80.9D.E5.85.83.E7.B4.A0.E7.9A.84.E5.8C.BA.E5.88.AB" name=".E2.80.9C.E5.9D.97.EF.BC.88Block.EF.BC.89.E2.80.9D.E5.85.83.E7.B4.A0.E4.B8.8E.E2.80.9C.E8.A1.8C.E5.86.85.EF.BC.88In-line.EF.BC.89.E2.80.9D.E5.85.83.E7.B4.A0.E7.9A.84.E5.8C.BA.E5.88.AB"> “块(Block)”元素与“行内(In-line)”元素的区别 </h5>
<ul><li> <b>块级元素(Block-level elements)</b>会为其内容(在视图上下文中)创建一个在垂直方向上排他的元素块——一般会在内容的前后换行。只有将 <code>display</code> 指定为此类值的元素可以自由地指定它所在的位置。块型元素的显示效果与 <code>BLOCKQUOTE</code>、<code>DIV</code>、标题(<code>H1</code>、<code>H2</code>、……)等 HTML 元素的显示效果相同。会产生块型元素的 <code>display</code> 属性值有:<code>block</code>、<code>list-item</code>、<code>table</code>、<code>compact</code> 和 <code>run-in</code>。
</li></ul>
<ul><li> <b>行内元素(In-line elements)</b>不会为其内容创建单独的块;元素用行框显示(内容分散在连续的行中)。行内行为效果与实际或虚拟字符格式设置、非浮动图像以及未标记内容等 HTML 元素相同。以下“Display”属性值会创建行内元素。“inline”、“inline-table”、“compact”和“run-in”。
</li></ul>
<h3 id=".E8.A7.84.E8.8C.83" 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 id=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7" 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 id=".E5.8F.82.E8.A7.81" name=".E5.8F.82.E8.A7.81"> 参见 </h3>
<p>{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display" } ) }}
恢复到这个版本