Layout und der Containing Block
Die Größe und Position eines Elements werden oft von seinem Containing Block beeinflusst. Meistens ist der Containing Block der Inhaltsbereich des nächsten Block-Level-Vorfahren des Elements, aber das ist nicht immer der Fall. In diesem Artikel untersuchen wir die Faktoren, die den Containing Block eines Elements bestimmen.
Wenn ein User-Agent (wie Ihr Browser) ein Dokument layoutet, generiert er für jedes Element einen Kasten. Jeder Kasten ist in vier Bereiche unterteilt:
- Inhaltsbereich
- Auffüllbereich
- Randbereich
- Außenabstand
Viele Entwickler glauben, dass der Containing Block eines Elements immer der Inhaltsbereich seines Elternteils ist, aber das stimmt nicht unbedingt. Lassen Sie uns die Faktoren untersuchen, die bestimmen, was der Containing Block eines Elements ist.
Auswirkungen des Containing Blocks
Bevor Sie erfahren, was den Containing 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 Containing Block beeinflusst. Prozentwerte, die auf die Eigenschaften width
, height
, padding
, margin
und Offset-Eigenschaften eines absolut positionierten Elements angewendet werden (d. h. dessen position
auf absolute
oder fixed
gesetzt ist), werden basierend auf dem Containing Block des Elements berechnet.
Ermittlung des Containing Blocks
Der Prozess zur Ermittlung des Containing Blocks hängt vollständig vom Wert der position
-Eigenschaft des Elements ab:
-
Wenn die
position
-Eigenschaftstatic
,relative
odersticky
ist, wird der Containing Block durch den Rand des Inhaltskastens des nächstgelegenen Vorfahrens gebildet, das entweder ein Block-Container (wie ein Inline-Block, Block oder Listenelement) ist oder einen Formatierungskontext etabliert (wie ein Tabellen-Container, Flex-Container, Grid-Container oder der Block-Container selbst). -
Wenn die
position
-Eigenschaftabsolute
ist, wird der Containing Block durch den Rand des Auffüllkastens des nächstgelegenen Vorfahren gebildet, der einenposition
-Wert ungleichstatic
(fixed
,absolute
,relative
odersticky
) hat. -
Wenn die
position
-Eigenschaftfixed
ist, wird der Containing Block durch den Viewport (bei kontinuierlichen Medien) oder den Bereich der Seite (bei paginierten Medien) etabliert. -
Wenn die
position
-Eigenschaftabsolute
oderfixed
ist, kann der Containing Block auch durch den Rand des Auffüllkastens des nächstgelegenen Vorfahren gebildet werden, der eines der folgenden Merkmale aufweist:- Einen
filter
,backdrop-filter
,transform
oderperspective
-Wert ungleichnone
. - Einen
contain
-Wert vonlayout
,paint
,strict
odercontent
(z. B.contain: paint;
). - Einen
container-type
-Wert ungleichnormal
. - Einen
will-change
-Wert, der eine Eigenschaft enthält, für die ein Nicht-Initialwert einen Containing Block bilden würde (z. B.filter
odertransform
). - Einen
content-visibility
-Wert vonauto
.
- Einen
Hinweis: Der Containing Block, in dem das Wurzelelement (<html>
) liegt, ist ein Rechteck namens initialer Containing Block. Es hat die Abmessungen des Viewport (bei kontinuierlichen Medien) oder des Seitenbereichs (bei paginierten Medien).
Hinweis: Es gibt Browser-Inkonsistenzen bei der Bildung des Containing Blocks mit perspective
und filter
.
Berechnung von Prozentwerten aus dem Containing Block
Wie oben erwähnt, hängt der berechnete Wert bei bestimmten Eigenschaften, die einen Prozentwert haben, vom Containing Block des Elements ab. Die Eigenschaften, die auf diese Weise funktionieren, sind Box-Modell-Eigenschaften und Offset-Eigenschaften:
- Die Eigenschaften
height
,top
undbottom
berechnen Prozentwerte aus derheight
des Containing Blocks. - Die Eigenschaften
width
,left
,right
,padding
undmargin
berechnen Prozentwerte aus derwidth
des Containing Blocks.
Hinweis: Ein Block-Container (wie ein Inline-Block, Block oder Listenelement) enthält entweder nur Inline-Boxen, die an einem Inline-Formatierungskontext teilnehmen, oder nur Block-Boxen, die an einem Block-Formatierungskontext teilnehmen. Ein Element ist nur dann ein Block-Container, wenn es Block- oder Inline-Ebenen-Boxen enthält.
Einige Beispiele
Der HTML-Code für alle unsere Beispiele ist:
<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, daher ist sein Containing Block <section>
, da er der nächste Vorfahre ist, der ein Block-Container ist (aufgrund von display: block
).
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 Containing Block des Absatzes das <body>
-Element, weil <section>
kein Block-Container ist (aufgrund von display: inline
) und keinen Formatierungskontext etabliert.
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 Containing Block des Absatzes <section>
, da dessen position
absolute
ist. Die Prozentwerte des Absatzes werden durch das padding
seines Containing Blocks beeinflusst, obwohl dies bei einem box-sizing
-Wert border-box
nicht der Fall wäre.
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 Containing Block der initiale Containing Block (auf Bildschirmen der Viewport). Somit ändern sich die Dimensionen des Absatzes basierend auf der Größe des Browserfensters.
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
, also ist sein Containing Block <section>
, welches der nächstgelegene Vorfahre mit einer transform
-Eigenschaft ist, die nicht none
ist.
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
all
-Eigenschaftcontain
-Eigenschaftaspect-ratio
-Eigenschaftbox-sizing
-Eigenschaftmin-content
undmax-content
-Größenwerte- Baustein: Größen von Elementen in CSS
- Box-Modell
- CSS-Box-Modell Modul
- Layout-Modi
- Visuelle Formatierungsmodelle
- Block-Formatierungskontext
- Stapelformatierungskontext
- Margin Collapsing
- Initiale, berechnete, verwendete und tatsächliche Werte
- Ersetzte Elemente
- Intrinsische Größe