Was ist die Hauptbedeutung der Eigenschaft display in…

Die Eigenschaft display bestimmt, wie ein Element im Dokument angezeigt wird und wie es mit anderen Elementen interagiert, indem es in den Layout-Fluss (layout flow) eingreift. Sie legt den Typ des Formatierungsblocks des Elements fest.

Hauptwerte:

block: Das Element wird als Block formatiert. Es nimmt die gesamte verfügbare Breite ein, beginnt in einer neuen Zeile und kann festgelegte Abmessungen (width, height) haben.
inline: Das Element wird inline formatiert. Es beginnt keine neue Zeile, nimmt nur die notwendige Breite ein und kann keine festgelegten Abmessungen (width, height) haben. Vertikale Ränder (margin-top, margin-bottom) und Innenabstände (padding-top, padding-bottom) beeinflussen die umliegenden Elemente nicht.
inline-block: Das Element wird inline formatiert, verhält sich aber wie ein Block innerhalb der Zeile. Es beginnt keine neue Zeile, kann festgelegte Abmessungen (width, height) haben sowie vertikale Ränder und Innenabstände, die die umliegenden Elemente beeinflussen.
none: Das Element und sein Inhalt werden nicht angezeigt. Das Element wird vollständig aus dem Dokumentenfluss entfernt und nimmt keinen Platz ein.
flex: Das Element wird zu einem Flex-Container, und seine direkten Nachkommen werden Flex-Elemente. Wird verwendet, um flexible Layouts zu erstellen.
grid: Das Element wird zu einem Grid-Container. Wird verwendet, um Layouts auf Rasterbasis zu erstellen.

Funktionsweise:

Der Browser verwendet den Wert display, um den Typ des Formatierungskontexts zu bestimmen, in dem sich das Element befindet. Dies beeinflusst:

Den Dokumentenfluss: Wie das Element relativ zu seinen Nachbarn positioniert ist.
Die Größe des Elements: Die Möglichkeit, Breite und Höhe festzulegen, sowie die Einflussnahme des Inhalts auf die Größen.
Die Auswirkung auf umliegende Elemente: Wie Margen und Größen des Elements die Anordnung anderer Elemente beeinflussen.

Beispiel:

/* Element mit display: block */
div {
  display: block;
  width: 100%; /* Nimmt die gesamte Breite ein */
  margin-bottom: 10px; /* Erzeugt einen vertikalen Abstand */
}

/* Element mit display: inline */
span {
  display: inline;
  /* width und height werden ignoriert */
  /* margin-top und margin-bottom werden ignoriert */
}

/* Element mit display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Breite kann festgelegt werden */
  height: 100px; /* Höhe kann festgelegt werden */
  margin: 5px; /* Erzeugt Abstände auf allen Seiten */
}

/* Verstecktes Element */
.hidden {
  display: none;
}

Was ist die Hauptbedeutung der Eigenschaft display in CSS und wie funktioniert sie?