Tiefgreifendes Verständnis der Eigenschaft „Vertical-Align“ und grundlegender Probleme in CSS

vertical-align wird hauptsächlich verwendet, um die Ausrichtung von Inline-Elementen zu ändern. Es hat einen großen Einfluss auf das Inline-Layout. Wenn wir es nicht verstehen, können bei der Entwicklung und Anpassung des Stils leicht Fehler passieren.

Das Prinzip dieser Eigenschaft ist im Internet sehr kompliziert und auf den ersten Blick entmutigend. Es ist nicht notwendig, das Prinzip vollständig zu verstehen. Solange wir die Regeln verstehen, können wir es verwenden. Hier teile ich mein Verständnis mit Ihnen:

Ausgangslage

Um vertical-align屬zu verstehen, müssen Sie die Grundlinie verstehen. Wie verstehen Sie die Grundlinie?

1. Wir schreiben Webseiten auf einem rechteckigen Bildschirm und legen sie oft Zeile für Zeile an. Es ist unvermeidlich, dass in einer Zeile mehrere Inhalte vorhanden sind. Wie richten wir also die Inhalte dieser Zeile nach oben und unten aus? Die Antwort besteht darin, ihre Grundlinien standardmäßig auszurichten.

2. Verschiedene Schriftarten, Bilder, Inline-HTML-Elemente und andere anzeigbare Inhalte haben ihre eigenen Grundlinien. Um die Grundlinie eines bestimmten Inhalts zu kennen, können wir eine einfache Referenz finden: den Kleinbuchstaben „x“. Warum suchen? Da sich bei englischen Buchstaben die Grundlinie unten am Kleinbuchstaben „x“ befindet, ist sie leichter zu erkennen.

Wenn wir die beiden oben genannten Punkte kennen, können wir die Grundlinienposition anderer Inhaltselemente leicht bestimmen. Wir können sie auf einen Blick erkennen, indem wir andere Elemente und das kleine „x“ in eine Zeile setzen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
  <Stil>
    div {
      Rand: 1px durchgehendes Cyan;
      Schriftgröße: 30px;
    }
    div .span1 {
      Anzeige: Inline-Block;
      Hintergrundfarbe: grün;
    }
    div .span2 {
      Anzeige: Inline-Block;
      Überlauf: versteckt;
      Hintergrundfarbe: grün;
    }
  </Stil>
</Kopf>
<Text>
  <div>
    X
    <img src="./demo.jpg" alt="">
    Chinesische Schriftzeichen <input type="text">
    <button>Schaltfläche</button>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</body>
</html>

Wie in der obigen Abbildung gezeigt, stellt Rot die Grundlinie der Elemente in dieser Zeile dar. Es ist ersichtlich, dass die Grundlinienpositionen von Bildern und Elementen mit dem Stil overflow:hidden unten liegen und die Grundlinienpositionen von Chinesisch, Eingabefeldern und button alle in der unteren mittleren Position liegen. Es ist ersichtlich, dass die Anordnung dieser Inline-Elemente darin besteht, zuerst die Grundlinie nach oben und unten auszurichten und dann das übergeordnete Element zu erweitern.

Beachtenswert ist, dass, wenn wir ein Bild direkt in das Div einfügen, zwischen der Unterseite des Bilds und der Unterseite des Div eine Lücke entsteht. Dies liegt daran, dass die Grundlinien der Inline-Elemente nach der Ausrichtung mit der Schriftgrundlinie des übergeordneten Elements übereinstimmen müssen. Mit anderen Worten: Die Grundlinie jedes Inline-Elements muss mit der Schriftgrundlinie des übergeordneten Elements übereinstimmen. Wenn sich jedoch die Zeilenhöhe und der Schriftgrößenstil des übergeordneten Elements ändern, ändert sich auch die Position der Schriftgrundlinie des übergeordneten Elements, wodurch sich die Position der Elemente innerhalb der Zeile insgesamt nach oben und unten verschiebt. Obwohl wir nur ein Bild und keinen Text sehen, hat das übergeordnete Element eine line-height und font-size , die das Layout unbemerkt beeinflussen. Sie werden feststellen, dass im Div ein kleines „x“ platziert ist, wie in der Abbildung unten gezeigt, und sein unterer Teil füllt einfach die Lücke aus. Wenn Sie diesen Grund kennen und diese Lücke schließen möchten, müssen Sie lediglich line-height und font-size des übergeordneten Elements auf 0 setzen oder das Bild auf ein Blockelement setzen und es allein eine Zeile einnehmen lassen. Wenn ein Eingabefeld direkt im Div platziert wird, entsteht eine Lücke über dem Eingabefeld. Es ist ähnlich, aber die Grundlinienposition des Bildes und des Eingabefelds ist unterschiedlich.

vertical-align-Eigenschaft

Nachdem wir die oben genannten Prinzipien zum Sortieren von Inline-Elementen verstanden haben, stellt sich uns möglicherweise eine Frage: Was passiert, wenn einige Inline-Elemente nicht entsprechend der Grundlinie angeordnet werden müssen? Die Antwort besteht darin, vertical-align zu verwenden.

Zunächst einmal ist die Eigenschaft vertical-align nur für Inline-Elemente wirksam. Sie ändert die Ausrichtung zwischen der Schriftart des aktuellen Inline-Elements und des übergeordneten Elements. Der Standardwert ist baseline , d. h. die Grundlinien der beiden sind ausgerichtet, wie wir oben getestet haben.

Weitere Informationen zu den Attributwerten finden Sie unter https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align. Sie können dem Div einfach ein kleines „x“ und ein Bild hinzufügen, um die Attribute zur Überprüfung umzuschalten.

Es gibt zwei Eigenschaften, die kurz erläutert werden müssen:

1. Wenn das Attribut auf „%“ gesetzt ist, bezieht es sich auf den Anteil des Zeilenhöhenattributwerts des aktuellen Inline-Elements. Es kann auf einen positiven oder negativen Wert gesetzt werden. Die Grundlinie des Inline-Elements bewegt sich um diesen Prozentsatz relativ zur Schriftgrundlinie des übergeordneten Elements nach oben oder unten. Stellen Sie das Bild wie unten gezeigt auf vertical-align: 50%; line-height: 30px “ ein. Die Unterseite des Bildes sollte mit der Unterseite des „x“ ausgerichtet sein, ist jetzt aber um 15px nach oben verschoben. Wenn es -50 % ist, wird es um 15px nach unten verschoben. Natürlich kannst du es auch direkt auf length，vertical-align：15px; der Effekt ist derselbe.

2. Wenn das Attribut auf „Mitte“ gesetzt ist, wird die mittlere Position des Inline-Elements an der Position 1/2 „x-Höhe“ über der Schriftgrundlinie des übergeordneten Elements ausgerichtet. „x-Höhe“ ist eigentlich die Höhe des Kleinbuchstabens „x“ im übergeordneten Element. Einfach ausgedrückt wird die mittlere Position des Inline-Elements an der mittleren Position des Kleinbuchstabens „x“ im übergeordneten Element ausgerichtet (der Schnittpunkt des x), was einer Ausrichtung der Mitte der beiden entspricht.

Zusammenfassen

Dies ist das Ende dieses Artikels über ein vertieftes Verständnis der vertikalen Ausrichtungseigenschaft und der Grundlinienprobleme in CSS. Weitere relevante CSS-Inhalte zur vertikalen Ausrichtungseigenschaft und Grundlinie finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: MySQL in Windows net start mysql Beim Starten des MySQL-Dienstes tritt ein Fehler auf. Lösung für Systemfehler

>>: Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung

Einführung in den glibc-Upgradeprozess für Centos6.5

Artikel

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Artikel

Tiefgreifendes Verständnis der Eigenschaft „Vertical-Align“ und grundlegender Probleme in CSS

Einführung in den glibc-Upgradeprozess für Centos6.5

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Kali Linux Installation VMware Tools Installationsprozess und VM Installation vmtools button grau

Eine kurze Zusammenfassung aller Kapselungsmethoden in Vue

So behalten Sie den Inhalt im Container, wenn das Flex-Layout durch untergeordnete Elemente gestreckt wird

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

So richten Sie domänenübergreifenden Zugriff in IIS web.config ein

Detaillierte Erklärung der JS-Homologiestrategie und CSRF

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)

Artikel empfehlen

JavaScript implementiert kreisförmiges Karussell

Lombok-Implementierung JSR-269

So richten Sie geplante Sicherungsaufgaben in Linux CentOS ein

Detaillierte Erklärung des Hintergrund-Positionsprozentsatzprinzips

So berechnen Sie die Bildrate FPS von Webanimationen

Ein kurzes Verständnis der drei Verwendungen von Standard-SQL-Update-Anweisungen

Detaillierte Erklärung des Typschutzes in TypeScript

Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

CocosCreator implementiert Skill-Kühleffekt

Vue implementiert verschiedene Ideen zur Erkennung sensibler Wortfilterkomponenten

Vue implementiert das Hinzufügen, Anzeigen und Löschen mehrerer Bilder

Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React

Teilen Sie 101 MySQL-Debugging- und Optimierungstipps