display

Jedes Element auf einer Webseite ist ein rechteckiger Kasten. Die Eigenschaft display in CSS bestimmt, wie sich dieser rechteckige Kasten verhält. Es gibt nur eine Handvoll Werte, die üblicherweise verwendet werden:

div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}

Der Standardwert für alle Elemente ist inline. Die meisten „User Agent Stylesheets“ (die Standardstile, die der Browser auf alle Sites anwendet) setzen viele Elemente auf „block“ zurück. Lassen Sie uns jedes dieser Elemente durchgehen und dann einige der anderen, weniger gebräuchlichen Werte behandeln.

Inline

Der Standardwert für Elemente. Denken Sie an Elemente wie <span><em> oder <b> und wie der Textumbruch in diesen Elementen innerhalb einer Textkette den Fluss des Textes nicht unterbricht.

Das <em> Element hat einen 1px roten Rahmen. Beachten Sie, dass es direkt inline mit dem Rest des Textes sitzt.

Ein Inline-Element akzeptiert Margin und Padding, aber das Element sitzt immer noch inline, wie man es erwarten könnte. Margin und Padding schieben andere Elemente nur horizontal weg, nicht vertikal.

Ein Inline-Element akzeptiert kein height und width. Es wird sie einfach ignorieren.

Inline-Block

Ein auf inline-block gesetztes Element ist dem Inline-Block sehr ähnlich, da es inline mit dem natürlichen Textfluss (auf der „Grundlinie“) gesetzt wird. Der Unterschied besteht darin, dass Sie ein width und ein height setzen können, die dann beachtet werden.

Block

Eine Reihe von Elementen wird vom UA-Stylesheet des Browsers auf block gesetzt. Das sind in der Regel Container-Elemente, wie <div><section> und <ul>. Auch Text-„Blöcke“ wie <p> und <h1>. Elemente auf Blockebene sitzen nicht inline, sondern brechen über sie hinweg. Standardmäßig (ohne Einstellung einer Breite) nehmen sie so viel horizontalen Platz ein, wie sie können.

Einlauf

Erstens funktioniert diese Eigenschaft in Firefox nicht. Es heißt, dass die Spezifikation dafür nicht gut genug definiert ist. Um es dennoch zu verstehen, ist es so, als ob Sie ein Header-Element inline mit dem Text darunter setzen wollen. Floating wird nicht funktionieren und auch nichts anderes, da Sie nicht wollen, dass die Überschrift ein Kind des darunter liegenden Textelements ist, sondern ein eigenes, unabhängiges Element. In „unterstützenden“ Browsern sieht es so aus:

Flexbox

Die display-Eigenschaft wird auch für neumodische Layoutmethoden wie Flexbox verwendet.

.header { display: flex;}

Es gibt einige ältere Versionen der Flexbox-Syntax, daher lesen Sie bitte diesen Artikel für die Syntax bei der Verwendung von Flexbox mit der besten Browserunterstützung. Sehen Sie sich unbedingt diese vollständige Anleitung zu Flexbox an.

Flow-Root

Der Anzeigewert flow-root erzeugt einen neuen „Blockformatierungskontext“, ist aber ansonsten wie block. Ein neuer BFC hilft bei Dingen wie dem Löschen von Floats und macht Hacks dafür überflüssig.

.group { display: flow-root;}

Grid

Das Layout des Gitters wird ebenfalls zunächst über die Eigenschaft display festgelegt.

body { display: grid;}

Hier ist unsere Anleitung zum Grid-Layout, die auch eine Tabelle zur Browserunterstützung enthält.

Keine

Das Element wird vollständig von der Seite entfernt. Beachten Sie, dass das Element zwar noch im DOM ist, aber visuell und auf jede andere denkbare Weise entfernt wird (Sie können nicht mit der Tabulatortaste auf das Element oder seine Kinder zugreifen, es wird von Screenreadern ignoriert usw.).

Tabellenwerte

Es gibt eine ganze Reihe von Anzeigewerten, die Nicht-Tabellenelemente dazu zwingen, sich wie Tabellenelemente zu verhalten, falls Sie das brauchen. Es ist selten, aber es erlaubt Ihnen manchmal, „semantischer“ mit Ihrem Code zu sein, während Sie die einzigartigen Positionierungsfähigkeiten von Tabellen nutzen.

div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}

Um sie zu verwenden, ahmen Sie einfach die normale Tabellenstruktur nach. Einfaches Beispiel:

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>