Tiefgreifendes Verständnis der Eigenschaft „Vertical-Align“ und grundlegender Probleme in CSS
|
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 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 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
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, 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 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
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! |
>>: Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung
Artikel empfehlen
Eine kurze Diskussion über die Lösung des Problems der nativen Seitenkompatibilität mit IE9
Vorwort Vor Kurzem habe ich die native Seite eine...
SQL-Fuzzy-Abfragebericht: ORA-00909: Lösung: Ungültige Anzahl von Parametern
Bei Verwendung einer Oracle-Datenbank für Fuzzy-A...
Einführung in bedingte Zugriffsattribute und Pfeilfunktionen in JavaScript
Inhaltsverzeichnis 1. Bedingte Zugriffsattribute ...
JavaScript-Grundlagen: Funktion zur sofortigen Ausführung
Inhaltsverzeichnis Funktionsformat sofort ausführ...
So generieren Sie PDFs und laden sie im Vue-Frontend herunter
Inhaltsverzeichnis 1. Installation und Einführung...
Detailliertes Tutorial zur MySQL-Installation und -Konfiguration
Inhaltsverzeichnis Installationsfreie Version von...
CentOS7 64-Bit-Installation MySQL Grafik-Tutorial
Voraussetzungen für die Installation von MySQL: I...
Detaillierte Erklärung der CSS-Animationsattribut-Keyframes
Wie lange ist es her, dass ich meine Kolumne aktu...
Vue implementiert ein Suchfeld mit einer Lupe
In diesem Artikel erfahren Sie, wie Sie mit Vue e...
Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats
1. Einleitung Wenn ein Webprojekt auf unserem Lin...
MySQL-Abfrageanweisungsprozess und grundlegende Konzepte der EXPLAIN-Anweisung und deren Optimierung
Die Leistung Ihrer Website oder Ihres Dienstes hä...
5 äußerst nützliche Open-Source-Docker-Tools, die dringend empfohlen werden
Einführung Die Docker-Community hat viele Open-So...
Eine audiovisuelle Linux-Distribution, die Audiophile anspricht
Ich bin kürzlich auf das Audiovisual Linux Projec...
Detaillierte Erläuterung des Prinzips und der Verwendung von MySQL-gespeicherten Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...
Erstellen und Verwenden von Docker-Datenvolumencontainern
Ein Datenvolumencontainer ist ein Container, der ...