From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/display/index.html | 259 ++++++++++++++++++++++++++++++++++++ 1 file changed, 259 insertions(+) create mode 100644 files/de/web/css/display/index.html (limited to 'files/de/web/css/display') 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 +--- +

{{ 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.

+ +

Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert none 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.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* 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;
+
+ +

Werte

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ModulWertBeschreibung
Basic values (CSS 1)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 {{cssxref("visibility")}} Eigenschaft verwendet werden.

+
inlineEs werden eine oder mehrere inline Elementboxen generiert.
blockEs wird eine Blockbox generiert.
list-itemEs wird eine block Box für den Inhalt und eine separate inline Box für die List-Items generiert.
Extended values (CSS 2.1)inline-blockEs wird eine block Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne inline Box wäre.
Table model values (CSS 2.1)inline-tableVerhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein inline Element generiert.
tableVerhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.
table-captionVerhält sich wie das {{HTMLElement("caption")}} HTML Element
table-cellVerhält sich wie das {{HTMLElement("td")}} HTML Element
table-columnVerhält sich wie das {{HTMLElement("col")}} HTML Element
table-column-groupVerhält sich wie das {{HTMLElement("colgroup")}} HTML Element
table-footer-groupVerhält sich wie das {{HTMLElement("tfoot")}} HTML Element
table-header-groupVerhält sich wie das {{HTMLElement("thead")}} HTML Element
table-rowVerhält sich wie das {{HTMLElement("tr")}} HTML Element
table-row-groupVerhält sich wie das {{HTMLElement("tbody")}} HTML Element
Flexbox model values (CSS3)flexEs wird ein Flexbox Container als block Element erzeugt.
inline-flexEs wird ein Flexbox Container als inline Element erzeugt.
Grid box model values (CSS3) {{experimental_inline}}gridEs wird ein Grid Container als block Element erzeugt. +
inline-gridEs wird ein Grid Container als inline Element erzeugt.
Ruby Formatierungsmodell Werte (CSS3){{experimental_inline}}rubyDas 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.
ruby-baseDiese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.
ruby-textDiese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.
ruby-base-containerDiese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.
ruby-text-containerDiese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.
Experimental values {{experimental_inline}}run-in +
    +
  • Wenn eine run-in Box eine block Box enthält, genau wie block.
    • +
  • Wenn einer block Box eine run-in Box folgt, wird die run-in Box die erste inline Box der block Box.
    • +
  • Wenn eine inline Box folgt, wird aus der run-in Box eine block Box.
    • +
+
contentsDiese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Live Beispiel

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

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Display', '#display', 'display')}}{{Spec2('CSS3 Display')}}run-in und contents Werte hinzugefügt
{{SpecName('CSS3 Ruby', '#display', 'display')}}{{Spec2('CSS3 Ruby')}}ruby, ruby-base, ruby-text, ruby-base-container und ruby-text-container Eigenschaften hinzugefügt
{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}{{Spec2('CSS3 Grid')}}Grid Box-Modell hinzugefügt
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Flexbox-Modell hinzugefügt
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Table-Model und inline-block hinzugefügt
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}none, block, inline und list-item hinzugefügt
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.display", 10)}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf