mozilla

Version 486995 von display

  • Adressname der Version: CSS/display
  • Titel der Version: display
  • ID der Version: 486995
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

{{ CSSRef() }}

Übersicht

Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline.

  • Standardwert: inline
  • Anwendbar auf: alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt. Außer beim Wurzelement, bei gefloateten Elementen und bei absolut positionierten Elementen.

Syntax

display:  <display-Wert> | inherit

Werte

none
Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.
Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die visibility Eigenschaft verwendet werden.
inline
Es werden eine oder mehrere inline Elementboxen generiert.
block
Es wird eine Blockbox generiert.
inline-block {{ gecko_minversion_inline("1.9") }}
Mit CSS 2.1 eingeführt. Es wird eine block Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne inline Box wäre.
list-item
Es wird eine block Box für den Inhalt und eine separate inline Box für die List-Items generiert.
compact
(Nicht unterstützt, aus dem CSS 2.1 Standard entfernt.)
run-in
{{ unimplemented_inline() }} in Gecko/Firefox, {{ bug("2056") }}.
  1. Wenn eine run-in Box eine block Box enthält, genau wie block.
  2. Wenn einer block Box eine run-in Box folgt, wird die run-in Box die erste inline Box der block Box.
  3. Wenn eine inline Box folgt, wird aus der run-in Box eine block Box.
table
Verhält sich wie das <table> HTML Element.
inline-table {{ Fx_minversion_inline(3) }}
Der inline-table Wert hat keinen direkten Bezug zu HTML.
table-caption
Verhält sich wie das <caption> HTML Element.
table-column | table-column-group
Diese Werte verhalten sich wie die entsprechenden <col> und <colgroup> HTML Elemente.
table-header-group | table-row-group | table-footer-group
Diese Werte verhalten sich wie die entsprechenden <thead> | <tbody> | <tfoot> HTML Elemente.
table-row
Verhält sich wie das <tr> HTML Element.
table-cell
Verhält sich wie das <td> HTML Element.

Mozilla Erweiterungen

Diese display Werte sind nicht für den Gebrauch in Webinhalten gedacht.

-moz-inline-block {{ obsolete_inline() }}
Niemals wirklich unterstützt.
-moz-inline-table {{ obsolete_inline() }}
Niemals unterstützt.
-moz-box
Kindelemente werden horizontal der vertikal angeordnet (basierend auf dem Wert der -moz-box-orient Eigenschaft).
-moz-inline-box
 
-moz-groupbox
 
-moz-grid
 
-moz-inline-grid
Kindelemente werden als XUL {{ xulelem("grid") }} Element ausgelegt.
-moz-grid-group
Kindelemente werden als eine Gruppe von Spalten oder Zeilen eines Grids angezeigt. Das ist das Layout, welches von den Zeilen- bzw. Spaltenelementen verwendet wird. Die -moz-box-orient Eigenschaft wird verwendet, um die Ausrichtung festzulegen. Zeilen haben normalerweise ein vertikale Ausrichtung und Spalten eine horizontale Ausrichtung.
-moz-grid-line
Kindelemente werden als einzelne Spalte oder Zeile eines Grids angezeigt. Die Ausrichtung kann über -moz-box-orient erfolgen.
-moz-stack
Kindelemente werden aufeinander angeordnet wie beim XUL {{ xulelem("stack") }} Element.
-moz-inline-stack
Kindelemente, auch inline-block, block, und -moz-inline-stack werden übereinander angeordnet.
-moz-deck
Kindelemente werden aufeinander angeordnet wie beim XUL {{ xulelem("deck") }} Element. Im Gegensatz zu -moz-stack wird allerdings nur das oberste Elemente angezeigt.
-moz-popup
 
-moz-marker
 

Beispiele

Live Beispiel

p.secret  { display: none }
<p class="secret">invisible text</p>

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline und block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
Nur inline Elemente
7.0 1.0 (85)
list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
run-in {{experimental_inline}} 1.0
Nicht vor inline-Elementen
{{CompatNo}} 8.0 7.0 1.0 (85)
Nicht vor inline-Elementen
4.0 5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, and table-caption 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
flex 21.0{{property_prefix("-webkit")}} {{CompatGeckoDesktop("18.0")}}(siehe Fussnote) [1] {{CompatNo}} 12.50 {{CompatNo}}
inline-flex 21.0{{property_prefix("-webkit")}} {{CompatGeckoDesktop("18.0")}}(siehe Fussnote) [1] {{CompatNo}} 12.50 {{CompatNo}}
grid {{experimental_inline}} {{CompatUnknown}} {{CompatNo}} 10.0{{property_prefix("-ms")}} {{CompatUnknown}} {{CompatUnknown}}
inline-grid {{experimental_inline}} {{CompatUnknown}} {{CompatNo}} 10.0{{property_prefix("-ms")}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

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

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht">Übersicht</h2>
<p>Die <code>display</code> Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen <code>display</code> Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert <code>inline</code>.</p>
<ul>
 <li>Standardwert: <code>inline</code></li>
 <li>Anwendbar auf: alle Elemente</li>
 <li>Vererbbar: Nein</li>
 <li>Prozentwerte: Nein</li>
 <li>Medium: visuell</li>
 <li>berechneter Wert: wie festgelegt. Außer beim Wurzelement, bei <a href="/de/CSS/float" title="de/CSS/float">gefloateten</a> Elementen und bei <a href="/de/CSS/position" title="de/CSS/position">absolut positionierten</a> Elementen.</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
display:  &lt;display-Wert&gt; | inherit</pre>
<h2 id="Werte">Werte</h2>
<dl>
 <dt>
  none</dt>
 <dd>
  Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.<br />
  Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die <a href="/de/CSS/visibility" title="de/CSS/visibility"><code>visibility</code></a> Eigenschaft verwendet werden.</dd>
 <dt>
  inline</dt>
 <dd>
  Es werden eine oder mehrere inline Elementboxen generiert.</dd>
 <dt>
  block</dt>
 <dd>
  Es wird eine Blockbox generiert.</dd>
 <dt>
  inline-block {{ gecko_minversion_inline("1.9") }}</dt>
 <dd>
  Mit CSS 2.1 eingeführt. Es wird eine <code>block</code> Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne <code>inline</code> Box wäre.</dd>
 <dt>
  list-item</dt>
 <dd>
  Es wird eine <code>block</code> Box für den Inhalt und eine separate <code>inline</code> Box für die List-Items generiert.</dd>
 <dt>
  compact</dt>
 <dd>
  (Nicht unterstützt, aus dem CSS 2.1 Standard entfernt.)</dd>
 <dt>
  run-in</dt>
 <dd>
  {{ unimplemented_inline() }} in Gecko/Firefox, {{ bug("2056") }}.
  <ol>
   <li>Wenn eine <code>run-in</code> Box eine <code>block</code> Box enthält, genau wie <code>block</code>.</li>
   <li>Wenn einer <code>block</code> Box eine <code>run-in</code> Box folgt, wird die <code>run-in</code> Box die erste <code>inline</code> Box der <code>block</code> Box.</li>
   <li>Wenn eine <code>inline</code> Box folgt, wird aus der <code>run-in</code> Box eine <code>block</code> Box.</li>
  </ol>
 </dd>
 <dt>
  table</dt>
 <dd>
  Verhält sich wie das <code>&lt;table&gt;</code> HTML Element.</dd>
 <dt>
  inline-table {{ Fx_minversion_inline(3) }}</dt>
 <dd>
  Der <code> inline-table</code> Wert hat keinen direkten Bezug zu HTML.</dd>
 <dt>
  table-caption</dt>
 <dd>
  Verhält sich wie das <code>&lt;caption&gt;</code> HTML Element.</dd>
 <dt>
  table-column | table-column-group</dt>
 <dd>
  Diese Werte verhalten sich wie die entsprechenden <code>&lt;col&gt; </code>und<code> &lt;colgroup&gt;</code> HTML Elemente.</dd>
 <dt>
  table-header-group | table-row-group | table-footer-group</dt>
 <dd>
  Diese Werte verhalten sich wie die entsprechenden <code>&lt;thead&gt; | &lt;tbody&gt; | &lt;</code><code>tfoot&gt;</code> HTML Elemente.</dd>
 <dt>
  table-row</dt>
 <dd>
  Verhält sich wie das <code>&lt;tr&gt;</code> HTML Element.</dd>
 <dt>
  table-cell</dt>
 <dd>
  Verhält sich wie das <code>&lt;td&gt;</code> HTML Element.</dd>
</dl>
<h3 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h3>
<p>Diese <code>display</code> Werte sind nicht für den Gebrauch in Webinhalten gedacht.</p>
<dl>
 <dt>
  -moz-inline-block {{ obsolete_inline() }}</dt>
 <dd>
  Niemals wirklich unterstützt.</dd>
 <dt>
  -moz-inline-table {{ obsolete_inline() }}</dt>
 <dd>
  Niemals unterstützt.</dd>
 <dt>
  -moz-box</dt>
 <dd>
  Kindelemente werden horizontal der vertikal angeordnet (basierend auf dem Wert der <code><a href="/de/CSS/-moz-box-orient" title="de/CSS/-moz-box-orient">-moz-box-orient</a></code> Eigenschaft).</dd>
 <dt>
  -moz-inline-box</dt>
 <dd>
  &nbsp;</dd>
 <dt>
  -moz-groupbox</dt>
 <dd>
  &nbsp;</dd>
 <dt>
  -moz-grid</dt>
 <dd>
  &nbsp;</dd>
 <dt>
  -moz-inline-grid</dt>
 <dd>
  Kindelemente werden als XUL {{ xulelem("grid") }} Element ausgelegt.</dd>
 <dt>
  -moz-grid-group</dt>
 <dd>
  Kindelemente werden als eine Gruppe von Spalten oder Zeilen eines Grids angezeigt. Das ist das Layout, welches von den Zeilen- bzw. Spaltenelementen verwendet wird. Die <code>-moz-box-orient</code> Eigenschaft wird verwendet, um die Ausrichtung festzulegen. Zeilen haben normalerweise ein vertikale Ausrichtung und Spalten eine horizontale Ausrichtung.</dd>
 <dt>
  -moz-grid-line</dt>
 <dd>
  Kindelemente werden als einzelne Spalte oder Zeile eines Grids angezeigt. Die Ausrichtung kann über <code>-moz-box-orient</code> erfolgen.</dd>
 <dt>
  -moz-stack</dt>
 <dd>
  Kindelemente werden aufeinander angeordnet wie beim XUL {{ xulelem("stack") }} Element.</dd>
 <dt>
  -moz-inline-stack</dt>
 <dd>
  Kindelemente, auch <code>inline-block</code>, <code>block</code>, und <code>-moz-inline-stack</code> werden übereinander angeordnet.</dd>
 <dt>
  -moz-deck</dt>
 <dd>
  Kindelemente werden aufeinander angeordnet wie beim XUL {{ xulelem("deck") }} Element. Im Gegensatz zu <code>-moz-stack</code> wird allerdings nur das oberste Elemente angezeigt.</dd>
 <dt>
  -moz-popup</dt>
 <dd>
  &nbsp;</dd>
 <dt>
  -moz-marker</dt>
 <dd>
  &nbsp;</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p><a class="external" href="/samples/cssref/display.html" rel="external nofollow" target="_blank" title="https://developer.mozilla.org/samples/cssref/display.html">Live Beispiel</a></p>
<pre>
p.secret  { display: none }
&lt;p class="secret"&gt;invisible text&lt;/p&gt;
</pre>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td><code>none</code>, <code>inline</code> und <code>block</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>4.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>inline-block</code></td>
    <td>1.0</td>
    <td>3.0 (1.9)</td>
    <td>5.5 (-7.0)<br />
     Nur inline Elemente</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>list-item</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>6.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td>
    <td>1.0<br />
     Nicht vor inline-Elementen</td>
    <td rowspan="2">{{CompatNo}}</td>
    <td rowspan="2">8.0</td>
    <td rowspan="2">7.0</td>
    <td>1.0 (85)<br />
     Nicht vor inline-Elementen</td>
   </tr>
   <tr>
    <td>4.0</td>
    <td>5.0 (532.5)</td>
   </tr>
   <tr>
    <td><code>inline-table</code></td>
    <td>1.0</td>
    <td>3.0 (1.9)</td>
    <td>8.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-colgroup</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>8.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>flex</code></td>
    <td>21.0{{property_prefix("-webkit")}}</td>
    <td>{{CompatGeckoDesktop("18.0")}}(siehe Fussnote) [1]</td>
    <td>{{CompatNo}}</td>
    <td>12.50</td>
    <td>{{CompatNo}}</td>
   </tr>
   <tr>
    <td><code>inline-flex</code></td>
    <td>21.0{{property_prefix("-webkit")}}</td>
    <td>{{CompatGeckoDesktop("18.0")}}(siehe Fussnote) [1]</td>
    <td>{{CompatNo}}</td>
    <td>12.50</td>
    <td>{{CompatNo}}</td>
   </tr>
   <tr>
    <td><code>grid</code> {{experimental_inline}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>10.0{{property_prefix("-ms")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
   <tr>
    <td><code>inline-grid</code> {{experimental_inline}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>10.0{{property_prefix("-ms")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>.</p>
<p>{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}</p>
Zu dieser Version zurücksetzen