CSS Grundlagen: Bring frischen Wind in deine Webseite mit Display und verschiedenen Box-Typen

English

CSS Einheit Display – Art der Darstellung

Die Elemente einer Webseite lassen sich grob in zwei Haupt-Kategorien einteilen – Block-Elemente und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz, d.h. sie erzeugen einen Zeilenumbruch vor und nach dem Element.

Die wichtigsten und meist genutzten HTML Blockelemente sind:

Überschriften   (mit den HTML <H1> bis <H6> Tags)
Absätze   (mit den HTML <P> Tag)
Listen   (mit den HTML <UL> und <OL> Tags)
HTML Tabellen   (mit den HTML-Tags <TABLE>, <TR> und <TD>)
Bereiche   (mit dem HTML <DIV> Tag)

CSS-Eigenschaft: Display
Beschreibung mögliche Werte Standardwert Kategorie
Art der Darstellung block
inline
inline-block
table
none
grid
flex
initial
inherit		 inline Bildschirm
Positionierung

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft display.

Es gibt noch mehr Werte für display. Aus Gründen der Übersichtlichkeit gehe ich auf diese eher selten benutzten Werte an dieser Stelle nicht ein.

Mit der CSS-Eigenschaft display kann man das Verhalten eines HTML-Elements ändern. Die typische Verwendung von Display sind die Eigenschaften

Für jedes HTML-Element erzeugt der Browser eine Box und weist ihr das grundlegende Verhalten zu. Durch die CSS-Eigenschaft Display kann dieses Verhalten geändert werden.

Beachte:

  1. Mit der Eigenschaft display lässt sich der Typ eines HTML-Elements (Block-Element oder Inline-Element) nicht ändern. Nur das Verhalten des HTML-Elements lässt sich ändern. Block-Elemente bleiben Block-Elemente und Inline-Elemente bleiben Inline-Elemente. Die Regel, dass Block-Elemente nicht in Inline-Elemente platziert werden dürfen, gilt nach wie vor.

  2. Die Eigenschaft display wird verwendet, wenn für ein Inline-Element das Verhalten eines Block-Elements oder für ein Block-Element das Verhalten eines Inline-Elements benötigt wird.

  3. Block-Elemente erzeugen einen eigenen Absatz. D.h. vor und nach dem HTML-Element wird gemäß Standard ein automatischer Zeilenumbruch bzw. Zeilenvorschub (Englisch: Linefeed).

  4. Inline-Elemente erzeugen keinen Absatz. D.h. der normale Textfluss wird nicht unterbrochen. Ein Inline-Element ist stets nur so breit wie für den Inhalt notwendig. Inline-Elemente werden gemäß Standard nebeneinander positioniert.

  5. Ein Element mit der Eigenschaft display: inline-block ist ein Inline-Element. Es ist aber möglich mit Margin einen Außenabstand und mit Padding einen Innenabstand zu definieren.

  6. Eine für die Praxis wichtige Deklaration ist display: none. Diese Deklaration legt fest, dass für das Element keine Box erzeugt werden soll. Das auf diese Weise ausgeblendete Element hat keinen Einfluss auf folgende Elemente im Layout der Webseite.

    So ausgeblendete Elemente können mit jedem anderen Wert für die Eigenschaft display wieder eingeblendet werden.

    Im Gegensatz zu display: none erzeugt visibility: hidden für das Element eine vollständig transparente Box. Mit visibility: hidden ausgeblendete Elemente haben Einfluss auf nachfolgende Elemente im Layout.

CSS-Layouts mit display, position und float

Die Eigenschaften Display, Position und Float ermöglichen CSS-basierte Layouts. Normalerweise werden die HTML-Elemente je nach Element-Typ untereinander (Block-Elemente) oder nebeneinander (Inline-Elemente) positioniert. Die Breite der Block-Elemente wird dabei jeweils durch das übergeordnete Element bestimmt.

Durch gezielte Definitionen lassen sich die Boxen und alle anderen Elemente auf der Webseite beliebig ausrichten. Dazu muss für jedes Element die Standard-Ausrichtung außer Kraft gesetzt und neu definiert werden.

Dieses Muster-Template demonstriert die Positionierung mit display, position und float am Beispiel eines responsiven Zwei Spalten Standard Layouts.