mozilla
Ihre Suchergebnisse

    display

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

    Zudem erlaubt einem der Wert none das Element gänzlich auszublenden.

    • Standardwert inline
    • Anwendbar auf Alle Elemente
    • Vererbt Nein
    • Prozentwerte —
    • Medium alle
    • Berechneter Wert as the specified value, ausser for positionierte undfloating Elemente undfor the root element. In both case the computed value may be another keyword than the one specified.
    • Animierbar Nein
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    display:  none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in

    Werte

    Modul Wert Beschreibung
    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 visibility Eigenschaft verwendet werden.
    inline Es werden eine oder mehrere inline Elementboxen generiert.
    block Es wird eine Blockbox generiert.
    list-item Es 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-block Es 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-table Verhält sich wie das <table> HTML Element, aber es wird ein inline Element generiert.
    table Verhält sich wie das <table> HTML Element. Es wird eine Blockbox generiert.
    table-caption Verhält sich wie das <caption> HTML Element
    table-cell Verhält sich wie das <td> HTML Element
    table-column Verhält sich wie das <col> HTML Element
    table-column-group Verhält sich wie das <colgroup> HTML Element
    table-footer-group Verhält sich wie das <tfoot> HTML Element
    table-header-group Verhält sich wie das <thead> HTML Element
    table-row Verhält sich wie das <tr> HTML Element
    table-row-group Verhält sich wie das <tbody> HTML Element
    Flexbox model values (CSS3) flex Es wird ein Flexbox Container als block Element erzeugt.
    inline-flex Es wird ein Flexbox Container als inline Element erzeugt.
    Grid box model values (CSS3) grid

    Es wird ein Grid Container als block Element erzeugt.

    As this is experimental, most browsers don't support it. Especially pay attention that -moz-grid is not the prefixed version of this, but a XUL layout model that must not be used on a Web site.
    inline-grid Es wird ein Grid Container als inline Element erzeugt.
    Experimental values run-in Nicht implementiert 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.

    Beispiele

    Live Beispiel

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

    Spezifikation

    Spezifikation Status Anmerkung
    CSS Basic Box Model Working Draft run-in hinzugefügt
    CSS Grid Layout Working Draft Grid Box-Modell hinzugefügt
    CSS Flexible Box Layout Module Candidate Recommendation Flexbox-Modell hinzugefügt
    CSS Level 2 (Revision 1) Recommendation Table-Model und inline-block hinzugefügt
    CSS Level 1 Recommendation none, block, inline und list-item hinzugefügt

    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 1.0
    Nicht vor inline-Elementen    		 Not supported 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-webkit 18.0 (18.0)(siehe Fussnote) [1] Not supported 12.50 Not supported
    inline-flex 21.0-webkit 18.0 (18.0)(siehe Fussnote) [1] Not supported 12.50 Not supported
    grid ? Not supported 10.0-ms ? ?
    inline-grid ? Not supported 10.0-ms ? ?
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    [1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: SJW, fscholz, Michael2402, Jürgen Jeka
    Zuletzt aktualisiert von: SJW,
    Seitenleiste ausblenden