Detaillierte Erklärung der CSS-Zeilenhöhe und -Höhe
|
Als ich kürzlich an CSS-Schnittstellen arbeitete, begegnete mir häufig die zwei Attribute „line-height“ und „height“. Ich habe sie nie wirklich verstanden. Heute habe ich mir die Zeit genommen, sie online nachzuschlagen, und verstehe sie nun einigermaßen. https://blog.csdn.net/a2013126370/article/details/82786681 Dieser Blogger hat sehr gut geschrieben. Zumindest hat es mir ein tieferes Verständnis von Zeilenhöhe und Höhe vermittelt. Es lohnt sich, daraus zu lernen. 1. Einige grundlegende Konzepte 1. Die Zeilenhöhe bezeichnet den vertikalen Abstand zwischen den Grundlinien von Textzeilen (auch Zeilenabstand genannt). 2. Der Zeilenabstand ist der Abstand zwischen der unteren Zeile der vorherigen Zeile und der oberen Zeile der nächsten Zeile
Aus meinem persönlichen Verständnis können wir folgende Schlussfolgerungen ziehen: 1. Wenn das Höhenattribut von div nicht festgelegt ist, ändert sich die Höhe von div entsprechend der Zeilenhöhe und wird nicht von der Schriftgröße beeinflusst. 2. Mit „Höhe“ wird die Höhe von Elementen festgelegt, z. B. die Höhe von „img“, die Höhe von „div“ usw. Mit der Zeilenhöheneigenschaft wird der Zeilenabstand (die Zeilenhöhe) festgelegt. Die beiden Eigenschaften stellen nicht dasselbe Konzept dar. 2. Codebeispiele
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel>SDDS</Titel>
<Stil>
html, Text, Div{
Rand: 0;
Polsterung: 0;
Rand: 0;
}
.bg0{
Breite: 200px;
Höhe: 45px;
Zeilenhöhe: 100px;
Hintergrundfarbe: rot;
Schriftgröße: 10px;
Zeilenumbruch: Wortumbruch;
}
.bg1{
Breite: 200px;
Höhe: 10px;
Hintergrundfarbe: grün;
}
.bg2{
Breite: 200px;
Höhe: 45px;
Hintergrundfarbe: gelb;
}
.bg3{
Breite: 200px;
Höhe: 55px;
Hintergrundfarbe: blau;
}
</Stil>
</Kopf>
<Text>
<div class="bg0">Die Shanghai University (SHU) ist eine 211-Universität</div>
<div Klasse="bg1"></div>
<div Klasse="bg2"></div>
<div Klasse="bg3"></div>
</body>
</html>Laufergebnisse:
Fazit: Es ist ersichtlich, dass die Summe der Höhen des gelben Hintergrund-Divs und des blauen Hintergrund-Divs die für das Div mit dem Klassennamen bg0 festgelegte Zeilenhöhe = 100px ist, und die für den ersten Teil des roten Divs festgelegte Höhe = 45px wird erhalten, indem die Schriftgröße von der Zeilenhöhe abgezogen und durch 2 geteilt wird, d. h. (100-10)/2 = 45px. Oben finden Sie eine ausführliche Erläuterung der Zeilenhöhe und -höhe von CSS. Weitere Informationen zur Zeilenhöhe und -höhe von CSS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen
>>: Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website
Artikel empfehlen
So installieren Sie MySQL 8.0.17 und konfigurieren den Fernzugriff
1. Vorbereitung vor der Installation Überprüfen S...
Detaillierte Erklärung der Linux-Befehle und der Dateisuche
1. Führen Sie eine Dateinamensuche durch which (S...
Detaillierte Schritte zur Installation von MySQL in Win
In diesem Artikel werden die detaillierten Schrit...
Analyse des Prozesses zum Erstellen eines LAN-Servers basierend auf http.server
Ich weiß nicht, ob Sie schon einmal in eine solch...
Implementierung einer Lösung für adaptive Textbereichshöhe in Vue
Inhaltsverzeichnis Versteckte Probleme Lösung zur...
So bereinigen Sie den von Docker belegten Speicherplatz
Docker nimmt viel Platz ein. Immer wenn wir Conta...
Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS
Inhaltsverzeichnis falten (reduzieren) Verwenden ...
Detaillierte Erklärung des Cocoscreater-Prefabs
Inhaltsverzeichnis Fertighaus So erstellen Sie ei...
Was ist Nginx-Lastausgleich und wie wird er konfiguriert?
Was ist Lastenausgleich? Der Lastausgleich wird h...
Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.
MySQL 5.7.17, scheint jetzt die neueste Version z...
Beispielanalyse des asynchronen Verhaltens von Popup-Fenstern auf Front-End-Webseiten von Vue.js
Inhaltsverzeichnis 1. Vorwort 2. Finden Sie zwei ...
Detailliertes Tutorial zur Installation und Konfiguration der komprimierten Version der MySQL-Datenbank
Inhaltsverzeichnis 1. MySQL herunterladen 2. Entp...
Analyse der Anweisungsausführungsreihenfolge von SQL und MySQL
Ich bin heute auf ein Problem gestoßen: Kann ich ...
So erstellen Sie einen Index für eine Join-Tabelle in MySQL
In diesem Artikel wird erläutert, wie Sie einen I...
Skin-Change-Lösung basierend auf Vue kombiniert mit ElementUI
Inhaltsverzeichnis Vorne geschrieben Lösung 1: Gl...