1. Web
  2. CSS
  3. Guides
  4. Display
  5. Layout und das umgebende Block

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Layout und das umgebende Block

Die Größe und Position eines Elements werden oft von seinem umgebenden Block beeinflusst. Meistens ist der umgebende Block der Inhaltsbereich des nächstgelegenen Block-Level Vorfahrenelements, aber das ist nicht immer der Fall. In diesem Artikel untersuchen wir die Faktoren, die den umgebenden Block eines Elements bestimmen.

Wenn ein Benutzeragent (wie Ihr Browser) ein Dokument layoutet, erzeugt er für jedes Element einen Kasten. Jeder Kasten wird in vier Bereiche unterteilt:

  1. Inhaltsbereich
  2. Auffüllbereich
  3. Randbereich
  4. Außenabstandbereich

Diagramm des Box-Modells

Viele Entwickler glauben, dass der umgebende Block eines Elements immer der Inhaltsbereich seines Elternteils ist, aber das ist nicht unbedingt wahr. Lassen Sie uns die Faktoren untersuchen, die bestimmen, was ein umgebender Block eines Elements ist.

Auswirkungen des umgebenden Blocks

Bevor Sie lernen, was den umgebenden Block eines Elements bestimmt, ist es nützlich zu wissen, warum er überhaupt wichtig ist.

Die Größe und Position eines Elements werden oft von seinem umgebenden Block beeinflusst. Prozentwerte, die auf die width, height, padding, margin und Offset-Eigenschaften eines absolut positionierten Elements angewendet werden (d.h. ein Element, dessen position auf absolute oder fixed gesetzt ist), werden aus dem umgebenden Block des Elements berechnet.

Identifizieren des umgebenden Blocks

Der Prozess zur Identifizierung des umgebenden Blocks hängt vollständig vom Wert der position-Eigenschaft des Elements ab:

  1. Wenn die position-Eigenschaft static, relative oder sticky ist, wird der umgebende Block durch den Rand des Content-Box des nächstgelegenen Vorfahrenelements gebildet, das entweder ein Block-Container (wie ein Inline-Block, Block oder Listenelement) ist oder einen Formatierungskontext erstellt (wie ein Tabellencontainer, Flexcontainer, Gridcontainer oder der Blockcontainer selbst).
  2. Wenn die position-Eigenschaft absolute ist, wird der umgebende Block durch den Rand des Padding-Box des nächstgelegenen Vorfahrenelements gebildet, das einen position-Wert ungleich static (fixed, absolute, relative oder sticky) hat.
  3. Wenn die position-Eigenschaft fixed ist, wird der umgebende Block durch das Viewport (im Fall von kontinuierlichen Medien) oder den Seitenbereich (im Fall von Seitenmedien) festgelegt.
  4. Wenn die position-Eigenschaft absolute oder fixed ist, kann der umgebende Block auch durch den Rand des Padding-Box des nächstgelegenen Vorfahrenelements gebildet werden, das eine der folgenden Werte hat:

Hinweis: Der umgebende Block, in dem sich das Wurzelelement (<html>) befindet, ist ein Rechteck, das als initialer umgebender Block bezeichnet wird. Es hat die Dimensionen des Viewports (für kontinuierliche Medien) oder des Seitenbereichs (für Seitenmedien).

Hinweis: Es gibt Browser-Inkonsistenzen bei der Verwendung von perspective und filter, die zur Bildung des umgebenden Blocks beitragen.

Berechnung von Prozentwerten aus dem umgebenden Block

Wie oben erwähnt, hängt der berechnete Wert von Prozentwerten bei bestimmten Eigenschaften vom umgebenden Block des Elements ab. Die Eigenschaften, die auf diese Weise arbeiten, sind Box-Modell-Eigenschaften und Offset-Eigenschaften:

  1. Die Eigenschaften height, top und bottom berechnen Prozentwerte aus der height des umgebenden Blocks.
  2. Die Eigenschaften width, left, right, padding und margin berechnen Prozentwerte aus der width des umgebenden Blocks.

Hinweis: Ein Block-Container (wie ein Inline-Block, Block- oder Listenelement) enthält entweder nur Inline-Level-Kästen, die an einem Inline-Formatierungskontext teilnehmen, oder nur Block-Level-Kästen, die an einem Block-Formatierungskontext teilnehmen. Ein Element ist ein Block-Container, nur wenn es Block-Level- oder Inline-Level-Kästen enthält.

Einige Beispiele

Der HTML-Code für alle unsere Beispiele ist:

html
<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>

Nur das CSS wird in jedem der untenstehenden Fälle geändert.

Beispiel 1

In diesem Beispiel ist der Absatz statisch positioniert, daher ist sein umgebender Block <section>, weil es der nächstgelegene Vorfahr ist, der ein Block-Container (aufgrund von display: block) ist.

css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /* == 400px * .5 = 200px */
  height: 25%; /* == 160px * .25 = 40px */
  margin: 5%; /* == 400px * .05 = 20px */
  padding: 5%; /* == 400px * .05 = 20px */
  background: cyan;
}

Beispiel 2

In diesem Beispiel ist der umgebende Block des Absatzes das <body>-Element, weil <section> kein Block-Container ist (aufgrund von display: inline) und keinen Formatierungskontext erstellt.

css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /* == half the body's width */
  height: 200px; /* Note: a percentage would be 0 */
  background: cyan;
}

Beispiel 3

In diesem Beispiel ist der umgebende Block des Absatzes <section>, weil dessen position absolute ist. Die Prozentwerte des Absatzes werden durch das padding seines umgebenden Blocks beeinflusst, obwohl dies bei einem box-sizing-Wert des umgebenden Blocks von border-box nicht der Fall wäre.

css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
  height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
  margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
  padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
  background: cyan;
}

Beispiel 4

In diesem Beispiel ist die position des Absatzes fixed, daher ist sein umgebender Block der initiale umgebende Block (auf Bildschirmen das Viewport). Somit ändern sich die Abmessungen des Absatzes basierend auf der Größe des Browserfensters.

css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /* == (50vw - (width of vertical scrollbar)) */
  height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
  margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
  padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
  background: cyan;
}

Beispiel 5

In diesem Beispiel ist die position des Absatzes absolute, daher ist sein umgebender Block <section>, welches der nächstgelegene Vorfahr mit einer transform-Eigenschaft ist, die nicht none ist.

css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /* == 200px */
  height: 25%; /* == 40px */
  margin: 5%; /* == 20px */
  padding: 5%; /* == 20px */
  background: cyan;
}

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden