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. em 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:
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?
<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 Zusätzlich zu den oben genannten Einheiteneinstellungen kann 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 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 Erläuterung des Ansichtsbeispiels zur MySQL-Ansichtsverwaltung [Hinzufügen-, Löschen-, Ändern- und Abfragevorgänge]](/upload/images/67cad9013b201.webp)
Artikel empfehlen
Problem mit der Kompilierung des Nginx RTMP-Moduls in der Arm-Version
Inhaltsverzeichnis 1. Vorbereitung: 2. Quellcode-...
So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen
Inhaltsverzeichnis verwenden Installieren Wie wir...
So implementieren Sie die Online-Hot-Migration von virtuellen KVM-Maschinen (Bild und Text)
1. Migrationsmethode für virtuelle KVM-Maschinen ...
Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen
Inhaltsverzeichnis Vorwort Mehrere gängige Bitope...
Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).
1. Entwicklungsumgebung vue+vant 2. Computersyste...
Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen
Heutzutage ist plattformübergreifende Entwicklung...
Detailliertes Tutorial zum Herstellen einer Verbindung zu einem Remote-Server-Docker zum Bereitstellen eines Spring Boot-Projekts in IDEA
Vorbereitende Schritte Habe einen Cloud-Server, m...
Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation
Virtuelle Maschinen sind eine sehr praktische Tes...
Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
Inhaltsverzeichnis Vorwort 1. Aktuelle Uhrzeit er...
TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial
Bei der Installation von tortoiseGit gab es immer...
HTML-Hyperlink ein Tag_Powernode Java Academy
Jeder, der HTML studiert oder verwendet hat, soll...
Webdesign-Erfahrung: Das Navigationssystem schlank machen
<br />Bei Diskussionen mit meinen Freunden h...
Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus
Was ist NFS? Netzwerkdateisystem Eine Methode ode...
Detaillierte Erklärung zur Verwendung von JavaScript-Funktionen
Inhaltsverzeichnis 1. Deklarieren Sie eine Funkti...
JavaScript-Flusskontrolle (Verzweigung)
Inhaltsverzeichnis 1. Prozesskontrolle 2. Sequent...