diff options
Diffstat (limited to 'files/de/web/css/display')
| -rw-r--r-- | files/de/web/css/display/index.html | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/files/de/web/css/display/index.html b/files/de/web/css/display/index.html new file mode 100644 index 0000000000..54b21e29b5 --- /dev/null +++ b/files/de/web/css/display/index.html @@ -0,0 +1,259 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/display +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Ü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> + +<p>Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert <code>none</code> es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +display: none; +display: inline; +display: block; +display: contents; +display: list-item; +display: inline-block; +display: inline-table; +display: table; +display: table-cell; +display: table-column; +display: table-column-group; +display: table-footer-group; +display: table-header-group; +display: table-row; +display: table-row-group; +display: flex; +display: inline-flex; +display: grid; +display: inline-grid; +display: ruby; +display: ruby-base; +display: ruby-text; +display: ruby-base-container; +display: ruby-text-container; +display: run-in; + +/* Globale Werte */ +display: inherit; +display: initial; +display: unset; +</pre> + +<h2 id="Werte">Werte</h2> + +<table class="standard-table"> + <thead> + <tr> + <td class="header" colspan="1">Modul</td> + <td class="header">Wert</td> + <td class="header">Beschreibung</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Basic values (CSS 1)</td> + <td><code>none</code></td> + <td> + <p>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.</p> + + <p>Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die {{cssxref("visibility")}} Eigenschaft verwendet werden.</p> + </td> + </tr> + <tr> + <td><code>inline</code></td> + <td>Es werden eine oder mehrere inline Elementboxen generiert.</td> + </tr> + <tr> + <td><code>block</code></td> + <td>Es wird eine Blockbox generiert.</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>Es wird eine <code>block</code> Box für den Inhalt und eine separate <code>inline</code> Box für die List-Items generiert.</td> + </tr> + <tr> + <td>Extended values (CSS 2.1)</td> + <td><code>inline-block</code></td> + <td>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.</td> + </tr> + <tr> + <td colspan="1" rowspan="10">Table model values (CSS 2.1)</td> + <td><code>inline-table</code></td> + <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein <code>inline</code> Element generiert.</td> + </tr> + <tr> + <td><code>table</code></td> + <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.</td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td>Verhält sich wie das {{HTMLElement("caption")}} HTML Element</td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td>Verhält sich wie das {{HTMLElement("td")}} HTML Element</td> + </tr> + <tr> + <td><code>table-column</code></td> + <td>Verhält sich wie das {{HTMLElement("col")}} HTML Element</td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td>Verhält sich wie das {{HTMLElement("colgroup")}} HTML Element</td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td>Verhält sich wie das {{HTMLElement("tfoot")}} HTML Element</td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td>Verhält sich wie das {{HTMLElement("thead")}} HTML Element</td> + </tr> + <tr> + <td><code>table-row</code></td> + <td>Verhält sich wie das {{HTMLElement("tr")}} HTML Element</td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td>Verhält sich wie das {{HTMLElement("tbody")}} HTML Element</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Flexbox model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> + <td><code>flex</code></td> + <td>Es wird ein Flexbox Container als <code>block </code>Element erzeugt.</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>Es wird ein Flexbox Container als <code>inline </code>Element erzeugt.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Grid box model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> + <td><code>grid</code></td> + <td>Es wird ein Grid Container als <code>block </code>Element erzeugt. + </td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td>Es wird ein Grid Container als <code>inline</code> Element erzeugt.</td> + </tr> + <tr> + <td colspan="1" rowspan="5">Ruby Formatierungsmodell Werte (<a href="/de/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td> + <td><code>ruby</code></td> + <td>Das Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden {{HTMLElement("ruby")}} HTML Elemente.</td> + </tr> + <tr> + <td><code>ruby-base</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.</td> + </tr> + <tr> + <td><code>ruby-text</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.</td> + </tr> + <tr> + <td><code>ruby-base-container</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.</td> + </tr> + <tr> + <td><code>ruby-text-container</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td> + <td><code>run-in</code></td> + <td> + <ul> + <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> + </ul> + </td> + </tr> + <tr> + <td><code>contents</code></td> + <td>Diese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.</td> + </tr> + </tbody> +</table> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="external" href="/samples/cssref/display.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/display.html">Live Beispiel</a></p> + +<pre>p.secret { display: none; } +<p class="secret">invisible text</p> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Display', '#display', 'display')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td><code>run-in</code> und <code>contents</code> Werte hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Ruby', '#display', 'display')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> und <code>ruby-text-container</code> Eigenschaften hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Grid Box-Modell hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Flexbox-Modell hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Table-Model und <code>inline-block</code> hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td><code>none</code>, <code>block</code>, <code>inline</code> und <code>list-item</code> hinzugefügt</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.display", 10)}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("position")}}</li> + <li>{{cssxref("flex")}}</li> +</ul> |