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
Erklärung der Funktionsweise und Verwendung von Redux
Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...
Bereitstellung und chinesische Übersetzung des Docker-Visualisierungstools Portainer
#Docker-Suche #Docker-Pull-Portainer 1. Laden Sie...
Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank
Um eine inkrementelle Sicherung der MySQL-Datenba...
Zusammenfassung der MySQL-Datums- und Zeitfunktionen (MySQL 5.X)
1. MySQL erhält die aktuelle Datums- und Uhrzeitf...
Vue implementiert das Hinzufügen eines Wasserzeicheneffekts zur Seite
Als ich kürzlich an einem Projekt arbeitete, wurd...
Eine umfassende Analyse der Möglichkeiten von Nginx
Vorwort Dieser Artikel konzentriert sich nur dara...
CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt
Der Anwendungsbereich von CSS ist global. Wenn da...
Lösung für den ONLY_FULL_GROUP_BY-Fehler in Mysql5.7 und höher
Während des jüngsten Entwicklungsprozesses handel...
Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels
Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...
Beispielcode zum Implementieren schöner Uhranimationseffekte mit CSS
Ich suche einen Job!!! Vorbereitung: Zunächst ein...
Eine kurze Diskussion über die Fallstricke der React UseEffect-Abschließung
Problemcode Schauen Sie sich den Code eines durch...
Vue Router lädt verschiedene Komponenten je nach Hintergrunddaten
Inhaltsverzeichnis Anforderungen aus der Projektp...
Detaillierte Erklärung verschiedener Join-Zusammenfassungen von SQL
SQL Left Join, Right Join, Inner Join und Natural...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...
Anwendungsszenarien für React useMemo und useCallback
Inhaltsverzeichnis verwendenMemo useCallback verw...