Zeilenhöhe, Schriftgröße und vertikaler Align sind Schlüsselattribute für die Festlegung des Layouts von Elementen innerhalb der Zeile. Diese drei Attribute sind voneinander abhängige Beziehungen, und die Änderung des Abstands zwischen Zeilen und der Festlegung vertikaler Ausrichtungen erfordert ihre gemeinsamen Anstrengungen. Der relevante Inhalt der Schriftgröße wurde in CSS-Schriftarten ausführlich eingeführt. In diesem Artikel wird hauptsächlich Linienhöhe und vertikale Ausrichtung vorgestellt.
Linienhöhe DefinitionDie Zeilenhöhe der Linienhöhe bezieht sich auf den Abstand zwischen den Baselines der Textlinie. Die Linienhöhe beeinflusst tatsächlich nur Inline-Elemente und andere Inline-Inhalte und wirkt sich nicht direkt auf Elemente auf Blockebene aus. Sie können auch die Zeilenhöhe für ein Element auf Blockebene festlegen. Dieser Wert wirkt sich jedoch nur aus, wenn sie auf den Inhalt von Elementen auf Blockebene angewendet werden. Deklarieren Sie eine Linienhöhe auf einem Element auf Blockebene, setzt eine Mindesthöhe für die Linienbox für den Inhalt des Elements auf Blockebene
Wert: <Länge> | <Prozentsatz> | <nummer> | Normal | erben
Anfangswert: Normal
Angewendet auf: alle Elemente
Erbschaft: Ja
Prozentsatz: Schriftgröße im Vergleich zum Element
der BegriffUm die Linienhöhe ausführlich zu verstehen, müssen Sie gemeinsame Begriffe über die Linienhöhe verstehen.
InhaltsbereichFür nicht ersetzende Elemente oder einen Teil des anonymen Textes in der Zeile bestimmen Schriftgröße und Schriftfamilie die Höhe des Inhaltsbereichs. Wenn die Schriftgröße eines Elements in einer Reihe 15px beträgt, beträgt die Höhe des Inhaltsbereichs 15px. In anderen Schriftarten entspricht die Höhe des Inhaltsbereichs nicht der Schriftgröße.
Inline -RahmenDer Inhaltsbereich plus der Linienabstand entspricht der Line-Inline-Box. Wenn die Schriftgröße eines Nicht-Replacement-Elements in einer Zeile 15px beträgt und die Linienhöhe 21px beträgt, beträgt die Differenz 6px. Der Benutzeragent unterteilt diese 6 Pixel in zwei und gilt die Hälfte der Ober- und Unterseite des Inhaltsbereichs, wodurch die Linie innerhalb der Box verleiht
Wenn die Linienhöhe weniger als Schriftgröße ist, ist das Line-in-Line-Box tatsächlich geringer als der Inhaltsbereich
ZeilenboxenDas Zeilenfeld ist definiert als der Abstand zwischen der Oberseite des Innenfelds mit der höchsten Zeile in der Zeile und dem unteren Bereich der niedrigsten Zeile innere Kästchen, und die Oberseite jedes Zeilenfelds befindet sich neben der Unterseite des Feldes der vorherigen Zeile.
BoxeigenschaftenDer innere Rand, der äußere Rand und der Rand haben die Höhe des Linienrahmens nicht beeinflusst, dh die Linienhöhe nicht beeinflusst.
Die Grenzgrenze von Inline-Elementen wird durch Schriftgröße anstelle von Linienhöhe gesteuert
Die Ränder werden nicht auf die obere und untere Rande der nicht erfüllenden Elemente in der Reihe angewendet
Rand-links, Polsterlinks, Grenz-Links werden auf den Beginn des Elements angewendet; Margin-Right, Padding-Rechts, Grenzrechte werden bis zum Ende des Elements angewendet
Elemente ersetzenDas Ersetzen von Elementen innerhalb einer Zeile erfordert die Verwendung von Linienhöhenwerten, um Elemente korrekt zu positionieren, wenn sie vertikal ausgerichtet sind. Weil der prozentuale Wert von vertikaler Align relativ zur Linienhöhe des Elements berechnet wird. Für die vertikale Ausrichtung ist die Höhe des Bildes selbst irrelevant. Der Schlüssel ist der Wert der Linienhöhe
Standardmäßig befindet sich das Inline -Ersatzelement an der Grundlinie. Wenn Sie dem Ersatzelement den inneren Rand, den äußeren Rand oder die Grenze hinzufügen, wird der Inhaltsbereich erhöht. Die Grundlinie des Ersatzelements ist die Grundlinie des letzten Zeilenfelds im normalen Stream. Es sei denn
vertikaler Ausrichtung DefinitionVertikale Ausrichtung wird verwendet, um die vertikale Ausrichtung einzustellen. Alle vertikal ausgerichteten Elemente beeinflussen die Zeilenhöhe.
Wert: Baseline | sub | Super | Top | Text-Top | Mitte | unten | Textboden | <Länge> | <Prozentsatz> | erben
Anfangswert: Basislinie
Angewendet auf: Inline-Elemente, Ersatzelemente, Tabellenzellen
Vererbung: Keine
Prozentsatz: Linienhöhe relativ zu Element-Linienhöhe
[Anmerkung] Der prozentuale Wert von vertikalem Align in IE7-Browser unterstützt keine Dezimalzeilenhöhe, und der Anzeigeeffekt unterscheidet sich von der von Standardbrowsern, wenn Basislinie, Mitte, Textboden usw. eingenommen werden. Die häufig verwendete Lösung besteht darin, die Anzeige festzulegen: Inline-Block in den Zeilenelementen.
CSS -Code -Inhalt in Zwischenablage kopieren