Umfassendes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Zeilenhöhe, Schriftgröße und vertikale Ausrichtung sind Schlüsselattribute zum Festlegen des Layouts von Inline-Elementen. Diese drei Eigenschaften sind voneinander abhängig. Das Ändern des Zeilenabstands, das Festlegen der vertikalen Ausrichtung usw. erfordert ihr Zusammenwirken. Der relevante Inhalt der Schriftgröße wurde in CSS-Schriftarten ausführlich vorgestellt. In diesem Artikel werden hauptsächlich Zeilenhöhe und vertikale Ausrichtung vorgestellt.

Zeilenhöhe

Definition

Zeilenhöhe Unter Zeilenhöhe versteht man den Abstand zwischen den Grundlinien von Textzeilen. Die Zeilenhöhe wirkt sich eigentlich nur auf Inline-Elemente und andere Inline-Inhalte aus und hat keine direkten Auswirkungen auf Blockelemente. Sie können die Zeilenhöhe auch für ein Blockelement festlegen, dieser Wert hat jedoch nur Auswirkungen, wenn er auf den Inline-Inhalt des Blockelements angewendet wird. Durch das Deklarieren der Zeilenhöhe für ein Blockelement wird eine minimale Zeilenfeldhöhe für den Inhalt dieses Blockelements festgelegt.

Wert: <Länge> | <Prozentsatz> | <Zahl> | normal | erben

Anfangswert: normal

Gilt für: Alle Elemente

Vererbung: Ja

Prozentsatz: relativ zur Schriftgröße des Elements

Um die Zeilenhöhe im Detail zu verstehen, müssen Sie die allgemeine Terminologie rund um die Zeilenrahmenkonstruktion verstehen.

Inhaltsbereich

Bei einem nicht ersetzten Inline-Element oder einem Abschnitt anonymen Textes bestimmen Schriftgröße und Schriftfamilie die Höhe des Inhaltsbereichs. Wenn bei Songti die Schriftgröße eines Inline-Elements 15 Pixel beträgt, beträgt die Höhe des Inhaltsbereichs 15 Pixel. Bei anderen Schriftarten entspricht die Höhe des Inhaltsbereichs nicht der Schriftgröße.

Inline-Box

Der Inhaltsbereich plus Zeilenabstand ergibt die Inline-Box. Wenn ein nicht ersetztes Inline-Element eine Schriftgröße von 15 Pixel und eine Zeilenhöhe von 21 Pixel hat, beträgt der Unterschied 6 Pixel. Der Benutzeragent teilt diese 6 Pixel in zwei Hälften und wendet die Hälfte oben und unten im Inhaltsbereich an, wodurch wir die Inline-Box erhalten.

Wenn die Zeilenhöhe kleiner als die Schriftgröße ist, ist die Inline-Box tatsächlich kleiner als der Inhaltsbereich

Zeilenbox

Eine Zeilenbox wird als der Abstand von der Oberseite der höchsten Inline-Box bis zur Unterseite der niedrigsten Inline-Box in der Zeile definiert, wobei die Oberseite jeder Zeilenbox die Unterseite der Zeilenbox in der vorherigen Reihe berührt.

Box-Eigenschaften

Polsterung, Ränder und Grenzen haben keinen Einfluss auf die Höhe des Zeilenfelds, d. h. sie haben keinen Einfluss auf die Zeilenhöhe

Die Rahmenbegrenzungen von Inline-Elementen werden durch die Schriftgröße statt durch die Zeilenhöhe gesteuert.

Auf die Ober- und Unterseite von Inline-Elementen, die nicht ersetzt werden, werden keine Ränder angewendet.

margin-left, padding-left und border-left gelten für den Anfang des Elements; margin-right, padding-right und border-right gelten für das Ende des Elements

Für inline ersetzte Elemente ist ein Zeilenhöhenwert erforderlich, damit das Element bei vertikaler Ausrichtung richtig positioniert wird. Weil der Prozentwert der vertikalen Ausrichtung relativ zur Zeilenhöhe des Elements berechnet wird. Für die vertikale Ausrichtung ist die Höhe des Bildes selbst nicht wichtig, was zählt, ist der Wert von line-height

Standardmäßig werden inline ersetzte Elemente auf der Grundlinie positioniert. Wenn Sie einem ersetzten Element eine untere Polsterung, einen Rand oder eine Umrandung hinzufügen, wird der Inhaltsbereich nach oben verschoben. Die Grundlinie eines ersetzten Elements ist die Grundlinie der letzten Zeilenbox im normalen Fluss. Sofern das Ersatzelement nicht leer ist oder sein Überlaufattributwert nicht sichtbar ist, entspricht die Grundlinie der unteren Randkante.

vertikale Ausrichtung

Definition

vertical-align wird verwendet, um die vertikale Ausrichtung festzulegen. Alle vertikal ausgerichteten Elemente beeinflussen die Zeilenhöhe.

Wert: Grundlinie | Unter | Ober | Oben | Text oben | Mitte | Unten | Text unten | <Länge> | <Prozent> | erben

Ausgangswert: Baseline

Gilt für: Inline-Elemente, ersetzte Elemente, Tabellenzellen

Vererbung: Nein

Prozentsatz: relativ zur Zeilenhöhe des Elements

[Hinweis] Der Prozentwert der vertikalen Ausrichtung im IE7-Browser unterstützt keine gebrochene Zeilenhöhe, und der Anzeigeeffekt bei Verwendung von Grundlinie, Mitte, Text-unten und anderen Werten unterscheidet sich von dem von Standardbrowsern. Die übliche Lösung besteht darin, das anzuzeigende Inline-Element festzulegen: Inline-Block

[Hinweis] <sub> und <sup> haben standardmäßig den Stil vertical-align:sub/super

Der Grund, warum Inline-Blockelemente Lücken in Blockebenenelementen hinterlassen, liegt darin, dass die standardmäßige vertikale Ausrichtung von Bildern die Grundlinienausrichtung ist (die Grundlinienausrichtung richtet im Prinzip die Unterkante des Bildes an der Unterkante des anonymen Textgroßbuchstabens X aus); und anonymer Text hat eine Zeilenhöhe, sodass die Unterkante von X einen gewissen Abstand vom Zeilenfeld hat, und dieser Abstand ist die Lücke, die das Bild hinterlässt

Daher gibt es für dieses Problem mehrere Lösungen:

[1]Anzeige:Block

Da die vertikale Ausrichtung nur auf ersetzte Elemente und Inline-Elemente angewendet werden kann, führt eine Änderung auf ein Element auf Blockebene dazu, dass die vertikale Ausrichtung ungültig wird.

[2] Zeilenhöhe des übergeordneten Elements: 0

Dadurch wird der Abstand zwischen dem anonymen Text und der Zeilenbox auf Null gesetzt.

[3]vertikale Ausrichtung: oben/Mitte/unten

Anwendung

【1】Eine einzelne Textzeile horizontal und vertikal zentrieren

[Hinweis] An vielen Stellen wird gesagt, dass zum vertikalen Zentrieren einer Textzeile die Höhe und die Zeilenhöhe auf den gleichen Wert eingestellt werden müssen. Tatsächlich ist es jedoch nicht erforderlich, die Höhe einzustellen. Stellen Sie einfach die Zeilenhöhe ein und der Text in einer Zeile wird vertikal zentriert.

【2】Das Bild ist ungefähr vertikal zentriert

XML/HTML-CodeInhalt in die Zwischenablage kopieren

Weil das Zeichen X nicht vertikal zentriert im Geviertfeld steht und die Höhenpositionen des Zeichens X in verschiedenen Schriftarten inkonsistent sind. Wenn die Schriftgröße größer ist, ist dieser Unterschied deutlicher

[Hinweis] Wenn Sie Blockelemente schreiben, die Inline-Elemente im IE7-Browser enthalten, müssen Sie diese in Zeilenumbrüchen schreiben, anstatt sie in einer Zeile zu schreiben.

Basierend auf Methode 2 setzen Sie die Schriftgröße des Blockelements auf 0, und das Bild kann vollständig vertikal zentriert werden.

Aufgrund der Einschränkung von Methode 3, die die Schriftgröße auf 0 setzt, kann kein Text in Blockelemente eingefügt werden. Bei Methode 4 wird der vertikale Zentriereffekt hauptsächlich durch das Hinzufügen neuer Elemente erzielt. Mit dieser Methode kann das Bild auch horizontal und vertikal zentriert werden.

【5】Symbol- und Textausrichtung

<Methode 1> Negative Länge verwenden

Nach praktischer Erfahrung kann ein 20*20 Pixel großes Symbol, gefolgt von einem 14px großen Text, einen besseren Ausrichtungseffekt erzielen, wenn die vertikale Ausrichtung auf -5px eingestellt ist

<Methode 2> Text unten ausrichten

Die Verwendung von „baseline“ bewegt das Symbol nach oben. Die Verwendung von „top/bottom“ wird von anderen Inline-Elementen beeinflusst und verursacht eine Positionierungsabweichung. Die Verwendung von „center“ erfordert die richtige Schriftgröße und weist eine geringe Kompatibilität auf. Die Verwendung von „text-bottom“ ist geeigneter und wird nicht von der Zeilenhöhe und anderen Inline-Elementen beeinflusst.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

Originaltext: http://www.cnblogs.com/xiaohuochai/p/5271217.html