Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Beispiele für Linien- und vertikale Ausrichtung in CSS
Formatierungsreihenfolge der Inline-Elemente: Schriftgröße-->EM-Box-->Inhaltsbereich-->Inline-Box-->Platzieren Sie die Inline-Box entsprechend der Grundlinie-->bestimmen Sie die Höhe der Zeilenfeld
Verwandte Konzepte:
Leading (Zeilenabstand): bezieht sich auf den Lead-Balken zwischen zwei Textzeilen, entspricht der Zeilenhöhe und der Schriftart. Der Unterschied zwischen -size, die Hälfte des Zeilenabstands wird über dem Text und die andere Hälfte des Zeilenabstands unter dem Text hinzugefügt und wird nur für nicht ersetzte Elemente verwendet.
em-Feld: Das em-Feld gibt den Abstand zwischen den Grundlinien an, wenn keine Grenzen zwischen den Zeichen angegeben sind. Die tatsächliche Glyphe ist möglicherweise detaillierter als seine Box. Groß oder kleiner.
font-size : Bestimmt die Höhe des Geviertfelds für eine bestimmte Schriftart, es gibt jedoch keine Garantie dafür, dass die tatsächlich angezeigten Zeichen diese Größe haben. Die konkrete Entsprechung zwischen dem Attribut „font-size“ und der tatsächlichen Schriftgröße wird vom Schriftdesigner bestimmt.
Grundlinie: Die Linie, auf der die meisten Buchstaben „sitzen“ und unter der sich Unterlängen erstrecken, ist nicht die Unterkante chinesischer Schriftzeichen, sondern die Unterkante des englischen Buchstabens „x“.
Inhaltsbereich (Inhaltsbereich): Nicht-Ersatzelemente sind Kästchen, die aus aneinandergereihten Em-Kästchen bestehen und indirekt durch die Schriftgröße bestimmt werden ;Ersatzelement: das heißt die inhärente Höhe des Elements zuzüglich möglicher Ränder und Felder.
Inline-Box (Inline-Box): Eine virtuelle rechteckige Box, die nicht angezeigt werden kann. Die Größe entspricht dem Inhaltsbereich plus führend. Bei nicht ersetzten Elementen entspricht er dem Zeilenhöhenwert; bei ersetzten Elementen entspricht er der Höhe des Inhaltsbereichs. Mehrere Elemente innerhalb derselben Zeile können unterschiedliche Zeilenhöhen und Inline-Box-Höhen haben.
Linienbox (Linienbox): Die kleinste Box, die die höchsten und niedrigsten Punkte aller Inline-Boxen in der Linie enthält, die Zeilenfeld Die Höhe bezieht sich nur auf die Zeilenhöhe des Elements in dieser Zeile und hat keine direkte Beziehung zur Zeilenhöhe und auch nichts mit der Höhe (Höhe) des übergeordneten Elements . Inline-Boxen werden basierend auf dem Wert ihrer Vertical-Align-Eigenschaft vertikal innerhalb der Zeile ausgerichtet.
Anonymer Text: bezieht sich auf eine beliebige Zeichenfolge, die nicht in einem Inline-Element enthalten ist.
Zeilenhöhe: bezieht sich auf den Abstand zwischen den Grundlinien der Textzeile, der bestimmt, um wie viel sich jedes Elementfeld vergrößert oder verkleinert. Der Standardwert ist das 1,2-fache der Schriftgröße des Elements selbst.
Wenn der Zeilenhöhenwert vom übergeordneten Element geerbt wird, erbt er den für das übergeordnete Element berechneten Wert, nicht den für das untergeordnete Element (em usw.) berechneten Wert. Wenn es sich um einen Skalierungsfaktor handelt (ein reiner numerischer Wert ohne Einheiten), wird der Skalierungsfaktor vererbt, nicht der berechnete Wert. Letztendlich wird das Produkt aus dem Skalierungsfaktor und der Schriftgröße des untergeordneten Elements berechnet.
Abbildung 1:
Abbildung 2: Zeile in CSS
Abbildung 3: OK-Zeile Boxhöhe
Ersatzelement
Die Ränder und Ränder des ersetzten Elements wirken sich auf die Inline-Box des Elements aus, was sich wiederum auf die auswirkt Höhe des Linienkastens.
Elemente, deren Inhalt nicht durch das visuelle CSS-Formatierungsmodell gesteuert wird, wie z. B. , ,
Nicht ersetzte Elemente
Alle anderen Elemente außer ersetzten Elementen sind nicht ersetzte Elemente. Der eigentliche Inhalt befindet sich im Dokumentfluss und das visuelle Formatierungsmodell von CSS ist verantwortlich für die nicht ersetzten Elemente.
Die Ränder und Ränder nicht ersetzter Elemente haben keinen Einfluss auf die Höhe des Inline-Felds mit Linienelementen.
vertikal-align: Vertikale Ausrichtung, gilt nur für Inline-Elemente, Ersatzelemente und Tabellenzellen und kann nicht vererbt werden.
Der Standardwert ist „baseline“, wodurch die Grundlinie des Inline-Elements an der Grundlinie der Zeile ausgerichtet wird. Wenn ein vertikal ausgerichtetes Element keine Grundlinie hat, wie etwa ein Bild, ein Formulareingabeelement oder ein anderes Ersatzelement, richten Sie den unteren Teil des Elements an der Grundlinie seines übergeordneten Elements aus .
Buchstaben wie f, j, p und q. Reparaturmethode: Legen Sie den Attributwert für die vertikale Ausrichtung des Bildes fest oder ändern Sie display:block oder ändern Sie die Schriftgröße/Zeilenhöhe des übergeordneten Elements, um die Höhe des Inline-Elements festzulegen Box kleiner als das Bild. Im Extremfall des übergeordneten Elements mit der Schriftgröße „font-size:0;“ fallen Mittellinie und Grundlinie zusammen. Unten: Richten Sie die Unterseite der Inline-Box des Elements an der Unterseite der Zeilenbox aus.
Mitte: Richten Sie die Mittellinie des Inline-Elementfelds an einem Punkt aus, der 0,25 cm über der Grundlinie liegt. Dies entspricht auch dem Abstand von der Grundlinie, der halb so hoch ist wie der Kleinbuchstabe x (d. h. 0,5 ex). Der Mittelpunkt des x-Zeichens ist nicht die absolute Mittellinie des Inhaltsbereichs, da das x-Zeichen etwas absinkt.Prozentsatz:
wird relativ zur
Linienhöhe des Elements berechnet. Die Funktion der Zeilenhöhe von inline austauschbaren Elementen besteht darin, bei der Berechnung der vertikalen Ausrichtung zu helfen. Spezifischer Längenwert: Heben oder senken Sie ein Element um einen angegebenen Abstand relativ zur Grundlinie des übergeordneten Elements. Vertikal ausgerichteter Text überdeckt nicht den Text anderer Zeilen; er wirkt sich nur auf die Zeilenhöhe der aktuellen Zeile aus, sodass diese groß genug ist, um den oberen Rand des höchsten Inline-Felds und den unteren Rand des untersten Inline-Felds aufzunehmen. Inline-Block: Inline-Block
, das Inline-Block-Element wird als Ersatzelement in der Zeile platziert, dh der untere Teil des Inline-Blocks wird auf der Grundlinie platziert der Textzeile standardmäßig. Für ie6/ie7 muss {display:inline; zoom:1;...} verwendet werden, um wirksam zu werden. Wird normalerweise verwendet, um horizontale Menülisten oder Listenelemente mit unterschiedlicher Höhe übersichtlich anzuordnen. Der Leerraum zwischen den li-Tags wird jedoch als Inline-Element behandelt und auf der Seite wird ein 4-Pixel-Leerzeichen angezeigt. Sie können das Leerzeichen entfernen, indem Sie das übergeordnete Element „font-size:0“ und das untergeordnete Element „font-size“ übergeben: 12px; Für ie6/ie7/safari müssen Wort- und Buchstabenabstand zur Anpassung verwendet werden.
Inline-Blöcke sind standardmäßig an der Grundlinie ausgerichtet, es gibt jedoch spezielle Vorschriften zur Bestimmung der Grundlinie. Der Die Grundlinie eines „Inline-Blocks“ ist die Grundlinie seines letzten Zeilenfelds im normaler Durchfluss, es sei denn, es gibt keine Zuflussleitungskästen oder es liegt ein „Überlauf“ vor. Die Eigenschaft hat einen anderen berechneten Wert als „sichtbar“, in diesem Fall die Basislinie ist die untere Randkante. Es erscheint also das unten gezeigte Layout, das durch Ändern von „vertikal-align:top;“ korrigiert werden kann.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Linien- und vertikale Ausrichtung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!