Layout und der enthaltende Block
Die Größe und Position eines Elements werden oft durch seinen enthaltenden Block beeinflusst. Meistens ist der enthaltende Block der Inhaltsbereich des nächsten Block-Level-Vorfahrenelements, aber dies ist nicht immer der Fall. In diesem Artikel untersuchen wir die Faktoren, die den enthaltenden Block eines Elements bestimmen.
Wenn ein User-Agent (wie Ihr Browser) ein Dokument layoutet, wird für jedes Element ein Rahmen erstellt. Jeder Rahmen ist in vier Bereiche unterteilt:
- Inhaltsbereich
- Auffüllungsbereich
- Rahmenbereich
- Außenabstandbereich
Viele Entwickler glauben, dass der enthaltende Block eines Elements immer der Inhaltsbereich seines übergeordneten Elements 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 verstehen, warum er überhaupt wichtig ist.
Die Größe und Position eines Elements werden oft durch seinen enthaltenden Block beeinflusst. Prozentuale Werte, die auf die width
, height
, padding
, margin
und Offset-Eigenschaften eines absolut positionierten Elements (d. h., das position
auf absolute
oder fixed
gesetzt hat) angewendet werden, werden basierend auf dem enthaltenden Block des Elements berechnet.
Bestimmung des enthaltenden Blocks
Der Prozess zur Identifizierung des enthaltenden Blocks hängt vollständig vom Wert der position
-Eigenschaft des Elements ab:
-
Wenn die
position
-Eigenschaftstatic
,relative
odersticky
ist, wird der enthaltende Block durch den Rand des Inhaltskastens des nächsten Vorfahrenelements gebildet, das entweder ein Blockcontainer (wie ein Inline-Block, Block oder Listenelement) ist oder einen Formatierungskontext erstellt (wie ein Tabellentainer, Flexcontainer, Gittercontainer oder der Blockcontainer selbst). -
Wenn die
position
-Eigenschaftabsolute
ist, wird der enthaltende Block durch den Rand des Auffüllkastens des nächsten Vorfahrenelements gebildet, das einenposition
-Wert ungleichstatic
(fixed
,absolute
,relative
odersticky
) hat. -
Wenn die
position
-Eigenschaftfixed
ist, wird der enthaltende Block durch den Viewport (im Fall von kontinuierlichen Medien) oder durch den Seitenbereich (im Fall von paginierten Medien) festgelegt. -
Wenn die
position
-Eigenschaftabsolute
oderfixed
ist, kann der enthaltende Block auch durch den Rand des Auffüllkastens des nächsten Vorfahrenelements gebildet werden, das eine der folgenden Eigenschaften hat:- 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, deren ein nicht-initialer Wert einen enthaltenden Block bilden würde (z. B.filter
odertransform
). - Einen
content-visibility
-Wert vonauto
.
- Einen
Hinweis:
Der enthaltende Block, in dem sich das Stamm-Element (<html>
) befindet, ist ein Rechteck, das als initialer enthaltender Block bezeichnet wird. Es hat die Dimensionen des Viewports (für kontinuierliche Medien) oder des Seitenbereichs (für paginierte Medien).
Hinweis:
Es gibt Browser-Inkonsistenzen bei der perspective
- und filter
-Eigenschaft, die zur Bildung des enthaltenden Blocks beitragen.
Berechnung von Prozentwerten basierend auf dem enthaltenden Block
Wie oben erwähnt, hängt der berechnete Wert bestimmter Eigenschaften, wenn sie einen Prozentwert erhalten, vom enthaltenden Block des Elements ab. Die Eigenschaften, die auf diese Weise funktionieren, sind Box-Modell-Eigenschaften und Offset-Eigenschaften:
- Die
height
,top
undbottom
-Eigenschaften berechnen Prozentwerte basierend auf derHöhe
des enthaltenden Blocks. - Die
width
,left
,right
,padding
undmargin
-Eigenschaften berechnen Prozentwerte basierend auf derBreite
des enthaltenden Blocks.
Hinweis: Ein Blockcontainer (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 Blockcontainer, wenn es Block-Level- oder Inline-Level-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 Fall angepasst.
Beispiel 1
In diesem Beispiel ist der Absatz statisch positioniert, sodass sein enthaltender Block <section>
ist, da dies der nächste Vorfahre ist, der ein Blockcontainer 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 enthaltende Block des Absatzes das <body>
-Element, da <section>
kein Blockcontainer 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 enthaltende Block des Absatzes <section>
, da dessen position
auf absolute
gesetzt ist. Die Prozentwerte des Absatzes werden durch die padding
seines enthaltenden Blocks beeinflusst, allerdings wäre dies nicht der Fall, wenn der box-sizing
-Wert des enthaltenden Blocks border-box
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
, sodass sein enthaltender Block der initiale enthaltende Block ist (auf Bildschirmen der Viewport). Daher ä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
, sodass sein enthaltender Block <section>
ist, das der nächste 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- Lernen: Größen in CSS festlegen
- Box-Modell
- CSS-Box-Modell-Modul
- Layout-Modi
- Visuelle Formatierungsmodelle
- Block-Formatierungskontext
- Stapel-Kontext
- Außenabstandskollaps
- Initiale, berechnete, genutzte und tatsächliche Werte
- Ersetzte Elemente
- Intrinsische Größe