CSS, HTML und Javascript mit {stil}

CSS display • Art der Darstellung

CSS display:none

CSS display ändert das Verhalten eines Elements beim Rendern der Seite. Beliebige Elemente können in Block-Tags, Inline-Tags oder Flow-Elemente umgewandelt werden.

Die am häufigsten verwendeten Werte sind display:none und display:block – CSS-Regeln, die ein Element sichtbar bzw. unsichtbar machen. display:block macht ein Element nicht nur sichtbar, sondern führt auch dazu, dass ein Element einen Zeilenumbruch erzeugt. display: inline macht das Element zum Inline-Element ohne Zeilenumbruch.

display: none unterdrückt die Darstellung eines Elements, so dass es keinen Raum im Dokument einnimmt (im Gegensatz zu der Eigenschaft visibility: hidden, die ein Element unsichtbar macht, aber seinen Raum erhält). display: block stellt ein Element als Blockelement dar und erzwingt, dass ein Element, für das display: none angegeben wurde, wieder sichtbar wird.

+

Der Wechsel zwischen display: none und display: block wird häufig für Effekte mit Javascript und zum Unterdrücken von unwesentlichen Elementen auf kleinen Monitoren eingesetzt.

Der Übergang von display:none zu display:block und umgekehrt ist nicht animierbar – CSS display läßt sich generell nicht animieren.

display: block | display: inline

display: block verwandelt ein Inline-Element (Element, das keinen Zeilenumbruch erzeugt) in ein Blockelement, das zu einem Zeilenumbruch führt. Umgekehrt transformiert die Eigenschaft display: inline ein Blockelement in ein Inline-Element.

ul.navleiste li { 
    display: inline; width: 120px; 
    border: 1px solid silver; float: left; 
}

display: inline-block

Elemente mit inline-block können als inline-Elemente (z.B. mit line-height und vertical-align) gestylt werden. padding und margin regeln der Abstand zum umfassenden Block und am Ende akzeptieren Elemente mit inline-block auch width und height wie ein Block-Element.

inline-block wandelt z.B. ein label-Tag in Formularen in ein Blockelement mit Zeilenumbruch um. So kann ein Formular in Spalten ohne aufwändige Tabellen aufgebaut werden.




display: inline-block wird von IE6 / IE7 nur unterstützt, wenn es sich bei dem Element um ein natives Inline-Element handelt.

display: table-row / table-cell

Tabellen waren in der Zeit vor CSS2 das angesagte Mittel für das Positionieren in einem Spaltenlayout. Heute werden Spalten vor allem durch float umgesetzt.

table-row und table-cell bilden die Zeile einer Tabelle nach und setzen z.B. drei Spalten auf großen Monitoren nebeneinander und auf kleinen Monitoren untereinander. display:table-row und display:table-cell ersparen bei einfachen Spalten so manche einen kniffeligen Hack, der für Spalten mit float gebraucht wird.

Lorem ipsum dolor sit amet
Vivamus ullamcorper cursus nibh, at mollis enim. Proin pellentesque aliquam dapibus. Cras aliquet, quam molestie venenatis egestas, tortor sapien vulputate metus
Donec arcu odio, vehicula ac rutrum ut

Mit display:table-cell passen sich sich die Höhe aller drei Boxen automatisch an das größte Element an. Eine einfache Media Query sorgt dafür, dass die Boxen auf kleinen Monitoren untereinander erscheinen und nur auf größeren Monitoren nebeneinander.

Als kleine Zugabe kann Inhalt in Boxen mit display: table-cell am oberen oder unteren Rand der Box ausgerichtet werden – vor allem aber auch mit vertical-align: middle in der vertikalen Mitte angeordnet werden.

 .tab div { background: #efefef;}

@media screen and (min-width: 620px ) {
.tab div { display: table-cell; width: 33%; }
.tab div:nth-child(1) { vertical-align: middle; }
.tab div:nth-child(3) { vertical-align: bottom; }
}

und im HTML-Markup

<div class="tab">
	<div>Lorem ipsum dolor sit amet</div>
	<div>Vivamus ullamcorper cursus nibh, </div>
	<div>Donec arcu odio, vehicula ac rutrum ut</div>
</div>

display: flex

Die Flexbox ist ein alternatives Modell für die Positionierung (CSS Flexible Box Layout Module) neben dem bekannten Block-Modell mit position: absolute / relative und float: left / right.

Das klassische Block-Modell für die Positionierung richtet Elemente entweder horizontal (display:inline) oder vertikal (display:block) aus. Äquivalent dazu richtet der Flex-Container die in ihm enthaltenen Elemente ebenfalls entweder horizontal (display:flex; flex-direction:row) oder vertikal (display:flex; flex-direction:column) aus. Der Flex-Container bestimmt als das Verhalten seiner Kinder.

Weitere Eigenschaft des Flex-Containers lassen die Flexboxen umbrechen, richten Flexboxen links, rechts, zentriert, an der Oberkante oder an der Unterkante aus. Der freie Platz zwischen den Boxen kann gleichmäßig verteilt werden.

Box 1
Box 2
Box 3

Das Flex-Modell hat in den letzten Jahren einiges an Wandel mitgemacht, sowohl in Hinsicht auf die Spezifikation als auch in Hinsicht auf die Implementierung in den verschiedenen Browsern. So kommt es, dass ein großer Teil der Berichte und Artikel zum flex-Modell veraltert sind und gehörig verwirren.

display: box;
Version von 2009.
display: flexbox;
Version 2011.
display: flex;
Aktuelle Version.

Die veralterten Versionen des Flex-Modells sind (noch) in den Browsern implementiert, auch wenn die neue Version ebenfalls implementiert ist. Die Unterstützung für die alten Versionen des Flex-Modells kann aber jederzeit entfallen.

Kleines Flexbox-Tutorial

CSS display

Erblich: Nein

display
block | compact | inline | inline-block | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit
block
stellt ein Element als Blockelement oder -box dar, das einen Zeilenumbruch vor und nach dem Element beinhaltet.
flex
stellt ein Element als Blockelement und Flex-Container dar.
inline-flex
stellt ein Element als Inline-Element und Flex-Container dar.
inline
ist die Vorgabe und stellt ein Element als Inlineelement dar. Inlineelemente führen nicht zu einem Zeilenumbruch vor und nach dem Element. Mit anderen Worten: Das Element wird in der gleichen Zeile dargestellt.
inline-block
erzeugt eine Box, die innerhalb einer Inlinebox »fließt«.
inline-table
stellt eine Tabelle als Inlineelement oder -box dar, das nicht zu einem Zeilenumbruch vor und nach der Tabelle führt.
list-item
stellt das Element als Liste dar. Jedem Element der Liste kann ein optionaler Listenpunkt wie ein gefüllter Kreis vorangesetzt werden.
marker
weist dem Inhalt vor oder nach einem Boxelement einen Marker zu. marker wird zusammen mit den Pseudoelementen :after und :before benutzt.
none
unterdrückt die Darstellung von Elementen. Wenn display:none gilt, muss der Browser alle Anweisungen für die Positionierung (sowohl position als auch float) ignorieren und generiert keine Box für das Element.
run-in
stellt das Element abhängig vom Kontext als Block- oder Inlineelement dar.
table
stellt ein Element als Blockelement dar.
table-caption
stellt ein Element als Tabellenbeschriftung (caption) dar.
table-cell
stellt das Element dar, als wäre es eine Tabellenzelle (td).
table-column
stellt das Element dar, als wäre es eine Tabellenspalte (col).
table-column-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenspalten (colgroup).
table-footer-group
stellt das Element dar, als wäre es eine Gruppe von Tabellen-Fußnoten (table footer).
table-header-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenköpfen (table header).
table-row
stellt das Element dar, als wäre es eine Tabellenzeile (table row).
table-row-group
stellt das Element dar, als wäre es eine Gruppe von Tabellenzeilen (table row).