Einführung der neuesten Längeneinheiten in CSS3

Markierungsanweisungen:

Nummern sind für Zweifelsbereiche markiert

Versuchen Sie, nach dem richtigen Namen eine englische Übersetzung anzugeben, da die offizielle Dokumentation ist grundsätzlich auf Englisch. Nach der Übersetzung durch verschiedene Leser kann es zu Unterschieden und Unklarheiten kommen.

Übersicht:

em: Die Schriftgröße relativ zum Text innerhalb des aktuellen Objekts. Schriftgröße relativ zum übergeordneten Knoten

rem: Schriftgröße relativ zum Stammelement . Anwendungsszenario: Das Layout wird durch den Textinhalt bestimmt.

vh und vv: 1vh entspricht 1/100 der Ansichtsfensterhöhe ^①, 1vw entspricht 1/100 der Ansichtsfensterbreite.

vmin und vmax: In Bezug auf den minimalen oder maximalen Wert der Höhe und Breite des Ansichtsfensters entspricht vmin dem Mindestwert von 1/100 der Breite und Höhe des Ansichtsfensters. Anwendungsszenario: Ein Element immer auf dem Bildschirm sichtbar machen.

ch: die Breite der Zahl 0

Beispiel: die Höhe des Kleinbuchstabens x Buchstabe der aktuellen Schriftart oder 1/2 von 1em^②. Anwendungsszenarien: Hochgestellte und tiefgestellte Zeichen

Extrahierte Informationen:

1. Schriftgröße: Wenn nicht deklariert, werden die Attribute des übergeordneten Knotens geerbt

Erweiterung:

①Fenster, Dokument, Körperbreite und -höhe:

Körperhöhe ist die Höhe des Körperelements (einschließlich Bildlaufleisten am Rand usw.), und die umgebende Standardeinstellung Mit 8 Pixel Rand

Wenn die Farbe nicht für den HTML-Code und die Farbe für den Körper festgelegt ist, füllt die Farbe des Körpers den gesamten Hintergrund aus

Das Ansichtsfenster bezieht sich auf der sichtbare Bereich des Browsers, außer Der Dokumentanzeigebereich von Rahmen, Bildlaufleisten und Symbolleisten

②Wie kann 0,5em gleich 1ex sein?

Nach tatsächlichen Tests wurde festgestellt, dass die Leistung bei der Einstellung 0,5em und 1ex leicht unterschiedlich ist. Schließlich entsprechen die Kleinbuchstaben x nicht der halben Schriftgröße (font-size). Es kann natürlich nicht ausgeschlossen werden, dass es eine Schriftart gibt, die genau diese Bedingung

relativ erfüllt: Sie wird an der entsprechenden Position versetzt. Die ursprüngliche Position von Dom bleibt erhalten

Das obige ist der detaillierte Inhalt vonEinführung der neuesten Längeneinheiten in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!