Inhaltsverzeichnis
10 Details zum visuellen FormatierungsmodellDie Position und die Größe der Boxen eines Elements werden manchmal relativ zu einem bestimmten Rechteck berechnet, dem umschließenden Block („containing block“) des Elements. Der umschließende Block eines Elements ist wie folgt definiert:
Beispiel
Ohne Positionierung werden die umschließenden Blöcke im folgenden Dokument wie nachfolgend eingerichtet.
<HTML>
<HEAD>
<TITLE>Demonstration umschließender Blöcke</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">Dieser Text befindet sich im ersten Absatz...</P>
<P id="p2">Dies ist Text <EM id="em1"> im
<STRONG id="strong1">zweiten</STRONG> Absatz.</EM></P>
</DIV>
</BODY>
</HTML>
| Für eine Box, die erzeugt wurde von | wird der umschließende Block eingerichtet von |
| body | umschließender Ausgangsblock (vom Benutzerprogramm abhängig) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | P2 |
| strong1 | P2 |
Wenn wir „div1“ positionieren:
#div1 { position: absolute; left: 50px; top: 50px }
ist sein umschließender Block nicht mehr „body“; er wird zum anfänglichen umschließenden Block (weil es keine anderen positionierten Vorfahren-Boxen gibt).
Wenn wir „em1“ ebenfalls positionieren:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
sieht die Tabelle der umschließenden Blöcke wie folgt aus:
| Für eine Box, die erzeugt wurde von | wird der umschließende Block eingerichtet von |
| body | umschließender Ausgangsblock |
| div1 | umschließender Ausgangsblock |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
Durch die Positionierung von „em1“ wird sein umschließender Block die am nächsten positionierte Vorfahren-Box (also jene, die durch „div1“ erzeugt wurde).
|
Wert: |
<length> | <percentage> | auto | inherit |
|
Ausgangswert: |
auto |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die Breite des umschließenden Blocks |
|
Medium: |
visual |
Diese Eigenschaft gibt die Inhaltsbreite von Boxen an, die auf Blockebene erzeugt wurden, sowie die Inhaltsbreite von ersetzten Elementen.
Diese Eigenschaft gilt nicht für nicht ersetzte Elemente auf Inline-Ebene. Die Breite der Boxen für ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts (vor jedem relativen Offset von untergeordneten Elementen). Beachten Sie, dass Inline-Boxen in Zeilen-Boxen einfließen. Die Breite von Zeilen-Boxen wird durch ihren umschließenden Block vorgegeben, ist aber bei Vorhandensein von Floats möglicherweise gekürzt.
Ein ersetztes Element hat eine eigene Box-Breite, die vom Benutzerprogramm skaliert werden kann, wenn diese Eigenschaft einen anderen Wert als 'auto' hat.
Die Werte haben die folgenden Bedeutungen:
Negative Werte für 'width' sind nicht erlaubt.
Beispiel
Die folgende Regel beispielsweise legt die Inhaltsbreite von Absätzen mit 100 Pixel fest:
P { width: 100px }
Die berechneten Werte der Eigenschaften 'width', 'margin-left', 'margin-right', 'left' und 'right' eines Elements sind vom Typ der erzeugten Box und voneinander abhängig. Im Prinzip sind die berechneten Werte dieselben wie die angegebenen Werte, wenn 'auto' durch einen geeigneten Wert ersetzt wird, aber es gibt Ausnahmen. Die folgenden Situationen müssen unterschieden werden:
Die Punkte 1-6 beinhalten eine relative Positionierung.
Die 'width'-Eigenschaft wird nicht angewendet. Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.
Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Wird für 'width' der Wert 'auto' angegeben, wird die eigene Breite des Elements als berechneter Wert angenommen.
Werden 'left' oder 'right' als 'auto' angegeben, ist ihr berechneter Wert gleich 0. Zwischen den anderen Eigenschaften müssen die folgenden Bedingungen gelten:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = Breite des umschließenden Blocks
(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Ist für alle oben aufgeführten Werte ein anderer Wert als 'auto' angegeben, sagt man, die Werte sind „überspezifiziert“ und einer der berechneten Werte muss sich von dem angegebenen Wert unterscheiden. Hat die 'direction'-Eigenschaft den Wert 'ltr', wird der angegebene Wert von 'margin-right' ignoriert, und der Wert wird berechnet, so dass die Gleichung stimmt. Ist der Wert von 'direction' gleich 'ltr', findet dies statt dessen auf 'margin-left' Anwendung.
Ist genau ein Wert als 'auto' angegeben, folgt sein berechneter Wert aus der Gleichung.
Ist 'width' auf 'auto' gesetzt, werden alle anderen 'auto'-Werte zu '0', und 'width' folgt aus der resultierenden Gleichung.
Sind sowohl 'margin-left' als auch 'margin-right' gleich 'auto', dann sind ihre berechneten Werte gleich.
Sind 'left' oder 'right' gleich 'auto', ist ihr berechneter Wert gleich 0. Ist 'width' als 'auto' angegeben, ist sein Wert die eigene Breite des Elements. Ist einer der Ränder als 'auto' angegeben, wird sein berechneter Wert durch die obigen Bedingungen festgelegt. Sind darüber hinaus beide Ränder gleich 'auto', sind ihre berechneten Werte gleich.
Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'.
Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'. Ist 'width' gleich 'auto', ist sein Wert die eigene Breite des Elements.
Die Bedingung, die die Berechnung für diese Elemente festlegt, ist die Folgende:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = Breite des umschließenden Blocks
(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die Lösung für diese Bedingung wird gefunden, indem einige Ersetzungen in der folgenden Reihenfolge vorgenommen werden:
Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene Breite hat. Die Abfolge der Ersetzungen ist jetzt:
|
Wert: |
<length> | <percentage> | inherit |
|
Ausgangswert: |
Vom Benutzerprogramm abhängig |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die Breite des umschließenden Blocks |
|
Medium: |
visual |
|
Wert: |
<length> | <percentage> | none | inherit |
|
Ausgangswert: |
Vom Benutzerprogramm abhängig |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die Breite des umschließenden Blocks |
|
Medium: |
visual |
Diese beiden Eigenschaften erlauben es Autoren, Box-Breiten auf einen bestimmten Bereich einzugrenzen. Die Werte haben die folgenden Bedeutungen:
Der folgende Algorithmus beschreibt, wie die beiden Eigenschaften den berechneten Wert der 'width'-Eigenschaft beeinflussen:
|
Wert: |
<length> | <percentage> | auto | inherit |
|
Ausgangswert: |
auto |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Siehe Text |
|
Medium: |
visual |
Negative Werte für 'height' sind nicht erlaubt.
Beispiel
Die folgende Regel beispielsweise legt die Höhe von Absätzen auf 100 Pixel fest:
P { height: 100px }
Absätze, für die eine Höhe von mehr als 100 Pixel erforderlich ist, erzeugen gemäß der 'overflow'-Eigenschaft einen Überlauf.
Zur Berechnung der Werte für 'top', 'margin-top', 'height', 'margin-bottom' und 'bottom' muss zwischen den verschiedenen Box-Typen unterschieden werden:
Die Punkte 1-6 beinhalten eine relative Positionierung.
Wird für 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'. Die 'height'-Eigenschaft wird nicht angewendet, aber die Höhe der Box wird durch die 'line-height'-Eigenschaft angegeben.
Wird für 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Ist 'height' gleich 'auto', ist der berechnete Wert die eigene Höhe.
Sind 'top', 'bottom', 'margin-top' oder 'margin-bottom' gleich 'auto', ist ihr berechneter Wert 0. Ist 'height' gleich 'auto', ist die Höhe davon abhängig, ob das Element untergeordnete Elemente auf Blockebene hat. Wenn es nur untergeordnete inzeilige Elemente hat, reicht die Höhe von der obersten Kante der obersten Zeilen-Box bis zur untersten Kante der untersten Zeilen-Box. Hat es untergeordnete Elemente auf Blockebene, ist sie der Abstand zwischen der obersten Rahmenkante der Box des obersten untergeordneten Elements auf Blockebene bis zur untersten Rahmenkante der Box des untersten untergeordneten Elements auf Blockebene. Nur untergeordnete Elemente im normalen Fluss werden berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert, und relativ positionierte Boxen werden ohne ihren Offset betrachtet.) Beachten Sie, dass die Box des untergeordneten Elements eine anonyme Box sein kann.
Für absolut positionierte Elemente müssen die vertikalen Ausmaße die folgende Bedingung erfüllen:
'top' + 'margin-top'+ 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = Höhe des umschließenden Blocks
(Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die Lösung für diese Bedingung wird durch mehrere Ersetzungen in der folgenden Reihenfolge erzielt:
Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene Höhe hat. Die Abfolge der Ersetzungen sieht jetzt wie folgt aus:
Manchmal ist es sinnvoll, die Höhe von Elementen auf einen bestimmten Bereich zu begrenzen. Zwei Eigenschaften realisieren diese Funktionalität:
|
Wert: |
<length> | <percentage> | inherit |
|
Ausgangswert: |
0 |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die Höhe des umschließenden Blocks |
|
Medium: |
visual |
|
Wert: |
<length> | <percentage> | none | inherit |
|
Ausgangswert: |
none |
|
Angewendet auf: |
Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die Höhe des umschließenden Blocks |
|
Medium: |
visual |
Diese beiden Eigenschaften gestatten es Autoren, Box-Höhen auf einen bestimmten Bereich zu begrenzen. Werte haben die folgenden Bedeutungen:
Der folgende Algorithmus beschreibt, wie diese beiden Eigenschaften den berechneten Wert der 'height'-Eigenschaft beeinflussen:
Wie im Abschnitt über Inline-Formatierungskontexte (9.4.2) beschrieben, führen Benutzerprogramme Inline-Boxen zu einem vertikalen Stapel aus Zeilen-Boxen zusammen. Die Höhe einer Zeilen-Box wird wie folgt ermittelt:
Leere inzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch Ränder, Auffüllung, Rahmen und eine Zeilenhöhe und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt.
Beachten Sie, dass die Zeilen-Box genau die Höhe der höchsten Box hat, wenn alle Boxen in der Zeilen-Box ihrer unteren Kante nach ausgerichtet sind. Sind die Boxen dagegen entlang einer gemeinsamen Grundlinie ausgerichtet, kann es sein, dass die obere und untere Kante der Zeilen-Box die untere und obere Kante der höchsten Box nicht berühren.
Weil sich die Höhe einer inzeiligen Box von der Schriftgröße des Texts in der Box unterscheiden kann (z.B. 'line-height' > 1em), kann es Platz oberhalb und unterhalb der dargestellten Glyphen geben. Die Differenz zwischen der Schriftgröße und dem berechneten Wert von 'line-height' wird auch als Durchschuss bezeichnet. Die Hälfte des Durchschusses wird als Halb-Durchschuss bezeichnet.
Benutzerprogramme zentrieren Glyphen vertikal in einer Inline-Box und fügen einen Halb-Durchschuss oben und unten ein. Ist ein Textstück beispielsweise '12pt' hoch und der 'line-height' ist '14pt', sollten 2pt zusätzlicher Platz hinzugefügt werden: 1pt oberhalb und 1 pt unterhalb der Buchstaben. (Das gilt auch für leere Boxen, so als ob die leere Box einen unendlich schmalen Buchstaben enthalten würde.)
Ist der Wert von 'line-height' kleiner als die Schriftgröße, ist die Höhe der endgültigen Inline-Box kleiner als die Schriftgröße und die dargestellten Glypen „laufen aus der Box heraus“. Berührt eine solche Box die Kante einer Zeilen-Box, fließen die dargestellten Glyphen auch in die benachbarte Zeilen-Box ein.
Obwohl Ränder, Rahmen und Auffüllung nicht-ersetzter Elemente für die Höhenberechnung der Inline-Box (und damit die Berechnung der Zeilen-Box) nicht berücksichtigt werden, werden sie dennoch um die Inline-Boxen herum dargestellt. Das bedeutet, wenn die Höhe einer Zeilen-Box kleiner als die äußeren Kanten der darin enthaltenen Boxen sind, können Hintergründe und Farben von Auffüllung und Rahmen in benachbarte Zeilen-Boxen „einfließen“. In diesem Fall können die Benutzerprogramme die Zeilen-Box jedoch nutzen, um die Rahmen- und Auffüllbereiche „abzuschneiden“ (das heißt, sie nicht darzustellen).
|
Wert: |
normal | <number> | <length> | <percentage> | inherit |
|
Ausgangswert: |
Normal |
|
Angewendet auf: |
Alle Elemente |
|
Vererbt: |
Ja |
|
Prozentwerte: |
Beziehen sich auf die Schriftgröße des eigentlichen Elements |
|
Medium: |
visual |
Ist die Eigenschaft für ein Element auf Blockebene gesetzt, dessen Inhalt sich aus Elementen auf Inline-Ebene zusammensetzt, gibt sie die minimale Höhe jeder erzeugten Inline-Box an.
Ist die Eigenschaft für ein Element auf Inline-Ebene gesetzt, gibt sie die genaue Höhe jeder Box an, die von dem Element erzeugt wird. (Außer für ersetzte Inline-Elemente, bei denen die Höhe der Box durch die 'height'-Eigenschaft angegeben wird.)
Die Werte für diese Eigenschaft haben die folgenden Bedeutungen:
Beispiel
Die drei Regeln im folgenden Beispiel erzeugen dieselbe Zeilenhöhe:
DIV { line-height: 1.2; font-size: 10pt } /* Zahl */
DIV { line-height: 1.2em; font-size: 10pt } /* Länge */
DIV { line-height: 120%; font-size: 10pt } /* Prozentwert */
Enthält ein Element Text, der in mehreren Schriften dargestellt wird, sollten die Benutzerprogramme den 'line-height'-Wert anhand der größten Schriftgröße ermitteln.
Allgemein gilt, wenn es nur einen Wert von 'line-height' für alle Inline-Boxen in einem Absatz (und keine hohen Bilder) gibt, stellt die obige Aussage sicher, dass Grundlinien aufeinanderfolgender Zeilen genau 'line-height' voneinander entfernt sind. Das ist wichtig, wenn Spalten mit Text in unterschiedlichen Schriften ausgerichtet werden müssen, beispielsweise in einer Tabelle.
Beachten Sie, dass ersetzte Elemente eine 'font-size'- und eine 'line-height'-Eigenschaft haben, selbst wenn sie nicht direkt verwendet werden, um die Höhe der Box zu ermitteln. Die 'font-size' wird jedoch verwendet, um die Einheiten 'em' und 'ex' zu definieren, und die 'line-height'-Eigenschaft spielt eine Rolle in der 'vertical-align'-Eigenschaft.
|
Wert: |
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> <length> | inherit |
|
Ausgangswert: |
baseline |
|
Angewendet auf: |
Elemente auf Inline-Ebene und 'table-cell'-Elemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
Beziehen sich auf die 'line-height' des eigentlichen Elements |
|
Medium: |
visual |
Diese Eigenschaft beeinflusst die vertikale Positionierung innerhalb einer Zeilen-Box der von einem Element auf Inline-Ebene erzeugten Boxen. Die folgenden Werte haben nur eine Bedeutung für ein übergeordnetes Element auf Inline-Ebene oder ein übergeordnetes Elemente auf Blockebene, wenn dieses Element anonyme Inline-Boxen erzeugt; sie haben keine Wirkung, wenn es keine solchen übergeordnete Elemente gibt.
Hinweis. Werte dieser Eigenschaft haben etwas unterschiedliche Bedeutungen im Kontext von Tabellen. Weitere Informationen finden Sie im Abschnitt über Algorithmen zur Ermittlung der Tabellenhöhe.
Die restlichen Werte beziehen sich auf die Zeilen-Box, in der die erzeugte Box erscheint: