Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

px (Pixel)

Ich glaube, jeder ist mit dem Begriff Pixel vertraut. Als nächstes stellen wir einige kleine Wissenspunkte zu dieser Einheit vor:

Pixel setzt sich aus den Wörtern Bild und Element zusammen. Pixel ist keine absolute natürliche Längeneinheit. Beispielsweise ist die „natürliche Länge“ derselben Größe von 1 Pixel auf verschiedenen Geräten unterschiedlich. Wenn Sie ein Bild vergrößern, werden Sie feststellen, dass das Bild aus kleinen Quadraten besteht, wobei jedes kleine Quadrat 1 Pixel groß ist. Je größer der Zoom, desto länger ist die natürliche Länge von 1 Pixel. Je mehr Pixel ein Bild derselben natürlichen Länge enthält, desto klarer ist das Bild.

Relativ zur Schriftgröße des Textes im aktuellen Objekt. Es kann auch als Prozenteinheit verstanden werden, 1em = 100 %. Lassen Sie uns also vorstellen, welche Art von Effekt em im CSS-Stil bietet:

Wenn für das aktuelle untergeordnete Element keine Schriftgröße festgelegt ist (die Standardschriftgröße des Browsers beträgt 16px), wird die Schriftgröße für das untergeordnete Element festgelegt: font-size:1em; dann beträgt die Schriftgröße des untergeordneten Elements 100 % der Schriftgröße des übergeordneten Elements x 16px = 16px; und so weiter: font-size:1.5em; die Schriftgröße des untergeordneten Elements beträgt 24px;

P{
    Schriftgröße: 1,5em;
}
div{
    Schriftgröße: 1,5em;
}
<div>
    <p>
        Schriftgröße</p>
</div>

Die „Schriftgröße“ beträgt hier 1,5 x 1,5 x 16 = 36px

Die Schriftgröße des übergeordneten Elements wird vom untergeordneten Element übernommen, aber der übernommene Wert ist der px-Wert, nicht der em-Wert. Wie ist das zu verstehen?

body{2em}

<Text>
    <div>
        <p></p>
    </div>
</body>

Dann sind die Unterelemente div und p im Textkörper beide 32px groß (nicht überlappend)

rem

Obwohl es sich auch um einen Prozentsatz relativ zur Schriftgröße handelt, ist das Referenzobjekt ähnlich wie bei em anders. Das Referenzobjekt von rem ist nicht das übergeordnete Element. Unabhängig davon, wie sich das übergeordnete Element ändert, reagiert die Schriftgröße des aktuell auf rem eingestellten Elements nicht.

rem ist relativ zum Stammelement (also html). Wenn wir ein HTML-Dokument schreiben, werden sowohl Kopf als auch Text von <html></html>-Tags umschlossen.

Im CSS-Stil können wir auch die Schriftgröße von HTML ändern

html{
    Schriftgröße: 10px;
}
div{
    Schriftgröße: 2rem;
}

An diesem Punkt beträgt die Schriftgröße des Div 20px;

Zahlen direkt in Zeilenhöhe im CSS-Stil schreiben

Die font-size ist falsch und es erfolgt keine Reaktion.

Zusätzlich zu den oben genannten Einheiteneinstellungen kann line-height jedoch auch direkt ohne Festlegen von Einheiten geschrieben werden.

In der Zeilenhöhe ist em ebenfalls ein Verhältnis relativ zur aktuellen Schriftgröße und erbt den festen Wert von px. Untergeordnete Elemente erben den Wert von em nicht.

Allerdings kann line-height:2; vererbt werden. Nachdem das untergeordnete Element dies geerbt hat, ist der Zeilenhöhenwert doppelt so groß wie die aktuelle Schriftgröße.

Zusammenfassen

Dies ist das Ende dieses Artikels über einige häufig verwendete Schriftgrößeneinheiten und Zeilenhöhen in CSS. Weitere relevante CSS-Inhalte zu Schriftgrößen und Zeilenhöhen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Was sind MySQL-Dirty-Pages?

>>: Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript

So führen Sie MySQL mit Docker-Compose aus

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

So führen Sie MySQL mit Docker-Compose aus

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten

Verwenden Sie href, um durch einfaches Klicken auf einen Link zu einer bestimmten Stelle auf der Seite zu springen

js, um die vollständigen Schritte der Konvertierung von Chinesisch nach Pinyin durchzuführen

Schritte zur Annotation von Metadeklarationen

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Beschreiben Sie kurz die Installation der verteilten Zeitreihendatenbank influxDB und die zugehörigen Vorgänge in Docker

Lösung zum Vergessen des Root-Passworts von MySQL5.7 unter Windows 8.1

Detaillierte Erklärung zur Verwendung von Vue.prototype in Vue

Artikel empfehlen

So verwenden Sie CSS-Variablen in JS

JDBC-Erkundung SQLException-Analyse

Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik

CSS implementiert 0,5px-Zeilen, um Kompatibilitätsprobleme mit Mobilgeräten zu lösen (empfohlen)

Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML

So richten Sie die passwortfreie SSH-Anmeldung beim Linux-Server ein

Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

Detaillierte Erklärung des Vue3-Sandbox-Mechanismus

Sprechen Sie kurz über MySQL Left Join Inner Join

So verwenden Sie border-image, um Beispielcode für Textblasenränder zu implementieren

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

W3C Tutorial (6): W3C CSS Aktivitäten

Verwenden Sie auto.js, um die automatische tägliche Check-in-Funktion zu realisieren

Beispielcode für Django+Vue-Registrierung und -Anmeldung

So implementiert Webpack das Caching statischer Ressourcen