Layout und der enthaltende Block

Die Größe und Position eines Elements wird oft durch seinen enthaltenden Block beeinflusst. Am häufigsten ist der enthaltende Block der Inhaltsbereich des nächstgelegenen Block-Levels eines Vorfahrenelements, aber dies ist nicht immer der Fall. In diesem Artikel untersuchen wir die Faktoren, die den enthaltenden Block eines Elements bestimmen.

Wenn ein Nutzeragent (wie Ihr Browser) ein Dokument anordnet, erzeugt er für jedes Element ein Box-Modell. Jede Box wird in vier Bereiche unterteilt:

  1. Inhaltsbereich
  2. Auffüllbereich (Padding)
  3. Rahmenbereich (Border)
  4. Randbereich (Margin)

Diagramm des Box-Modells

Viele Entwickler glauben, dass der enthaltende Block eines Elements immer der Inhaltsbereich seines Elternelements ist, aber das ist nicht unbedingt der Fall. Lassen Sie uns die Faktoren untersuchen, die bestimmen, was der enthaltende Block eines Elements ist.

Auswirkungen des enthaltenden Blocks

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

Die Größe und Position eines Elements wird oft durch seinen enthaltenden Block beeinflusst. Prozentwerte, die auf die Eigenschaften width, height, padding, margin und Offset-Eigenschaften eines absolut positionierten Elements angewendet werden (d.h. solche mit position auf absolute oder fixed gesetzt), werden aus dem enthaltenden Block des Elements berechnet.

Identifizierung des enthaltenden Blocks

Der Prozess zur Identifizierung des enthaltenden 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 enthaltende Block durch den Rand der Inhaltsbox des nächstgelegenen Vorfahrenelements gebildet, das entweder ein Block-Container ist (wie ein Inline-Block, Block oder Listenelement) oder einen Formatierungskontext erstellt (wie ein Tabellen-Container, Flex-Container, Grid-Container oder der Block-Container selbst).

  2. Wenn die position-Eigenschaft absolute ist, wird der enthaltende Block durch den Rand der Auffüllbox des nächstgelegenen Vorfahrenelements gebildet, das einen position-Wert ungleich static hat (fixed, absolute, relative oder sticky).

  3. Wenn die position-Eigenschaft fixed ist, wird der enthaltende Block durch den Ansichtsbereich (im Fall von kontinuierlichen Medien) oder den Seitenbereich (im Fall von seitenweise Medien) festgelegt.

  4. Wenn die position-Eigenschaft absolute oder fixed ist, kann der enthaltende Block auch durch den Rand der Auffüllbox des nächstgelegenen Vorfahrenelements gebildet werden, das eine der folgenden Eigenschaften hat:

Hinweis: Der enthaltende Block, in dem sich das Wurzelelement (<html>) befindet, ist ein Rechteck, das als ursprünglicher enthaltender Block bezeichnet wird. Er hat die Dimensionen des Ansichtsbereichs (für kontinuierliche Medien) oder des Seitenbereichs (für seitenweise Medien).

Hinweis: Es gibt inkonsistente Darstellungen in Browsern bei der Bildung des enthaltenden Blocks durch perspective und filter.

Berechnung von Prozentwerten aus dem enthaltenden Block

Wie oben erwähnt, wenn bestimmten Eigenschaften ein Prozentwert zugewiesen wird, hängt der berechnete Wert vom enthaltenden Block des Elements ab. Die Eigenschaften, die auf diese Weise funktionieren, sind Box-Modell-Eigenschaften und Offset-Eigenschaften:

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

Hinweis: Ein Block-Container (wie ein Inline-Block, Block oder Listenelement) enthält entweder nur Inline-Level-Boxen, die an einem Inline-Formatierungskontext teilnehmen, oder nur Block-Level-Boxen, die an einem Block-Formatierungskontext teilnehmen. Ein Element ist nur dann ein Block-Container, wenn es Block-Level- oder Inline-Level-Boxen 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 folgenden Fälle verändert.

Beispiel 1

In diesem Beispiel ist der Absatz statisch positioniert, sodass sein enthaltender Block <section> ist, da es der nächstgelegene Vorfahre ist, der ein Block-Container ist (aufgrund von display: block).

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 enthaltende 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 enthaltende Block des Absatzes <section>, weil dessen position absolute ist. Die Prozentwerte des Absatzes werden durch das padding seines enthaltenden Blocks beeinflusst, obwohl dies nicht der Fall wäre, wenn der box-sizing-Wert des enthaltenden Blocks border-box 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, sodass sein enthaltender Block der ursprüngliche enthaltende Block ist (auf Bildschirmen der Ansichtsbereich). Daher ä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, sodass sein enthaltender Block <section> ist, welches der nächstgelegene Vorfahre 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