1. Längeneinheit in CSS
In CSS verwenden viele Werte die Länge als Wert. Die Attribute des Boxmodells sind einige offensichtliche Wertattribute: Breite, Höhe, Rand, Abstand und Rand. Darüber hinaus gibt es viele CSS-Attribute, deren Werte auch Längenwerte sind, wie z. B. Offset-Offset, Box-Shadow-Größe oder Schriftgröße, Abstand usw. Es gibt viele Längeneinheiten in CSS. Wir werden sie weiter unten besprechen über Längeneinheiten und ihre Verwendung.
2. Eine kurze Einführung (Was sind die Längeneinheiten?)
In CSS gibt es zwei Arten von Längeneinheiten: absolute Länge und relative Länge .
Absolute Länge: px, in, cm, mm, pt, pc;
Relative Länge: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Detaillierte Einführung
1. Absolute Längeneinheit
Die absolute Längeneinheit stellt eine reale physikalische Größe dar. Ihre Größe ist fest und ändert sich nicht aufgrund von Größenänderungen anderer Elemente. In der folgenden Tabelle sind die in CSS unterstützten absoluten Längeneinheiten aufgeführt.
px: stellt Pixel dar. Die Seite wird in genauen Pixeln angezeigt und ändert sich nicht aufgrund von Änderungen in der Größe anderer Elemente. Pixel sind beispielsweise immer noch die typischste Maßeinheit für Windows Die von Mac-Benutzern verwendete Auflösung beträgt 96 Pixel/Zoll, während die von Mac-Benutzern verwendete Auflösung im Allgemeinen 72 Pixel/Zoll beträgt. , die Einheit in der allgemeinen JavaScript-Sprache ist das verwendete Pixel.
div{width:200px;}in: Zoll ist eine physikalische Maßdatei, aber im CSS-Feld wird Zoll nur direkt in Pixel abgebildet. (1 Zoll == 2,54 cm == 96 Pixel)
div{width:2in;}cm : Zentimeter ist eine bekannte und nützliche physikalische Maßeinheit. Es wird auch in Pixel abgebildet. (1cm == 37,8px)
div{width:20cm;}mm: Millimeter ist eine physikalische Maßeinheit in einer kleinen Größenordnung. (1mm == 0,1cm == 3,78px )
div{width:200mm;}p t: Punkte sind ebenfalls physikalische Längeneinheiten. (1pt == 1/72in == 96/72px)
div{width:20pt;}pc: Pica ist dasselbe wie Punkte, außer (1pc == 12pt).
div{width:20pt;}Beispiel:
<!DOCTYPEhtml><html><head><title>Absolute Längeneinheit</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {Schriftgröße: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>Dies ist eine 16px-Schriftart<pclass=pt>Dies ist eine 2pt-Schriftart</p><pclass =pc>Dies ist die Schriftart von 3pc</p></div></body></html>Die präsentierten Ergebnisse lauten wie folgt:
2. Relative Längeneinheit
Die relative Längeneinheit bedeutet, dass diese Einheit keinen festen Wert hat. Ihr Wert wird von anderen Elementattributen beeinflusst (z. B. der Größe des Browserfensters und der Größe des übergeordneten Elements). Die relative Längeneinheit eignet sich sehr gut für Responsive Die folgende Tabelle listet die in CSS unterstützten relativen Längeneinheiten auf.
em: em ist eine relative Einheit, relativ zur Schriftgröße des Texts innerhalb des aktuellen Objekts. Wenn die Schriftgröße innerhalb der aktuellen Zeile nicht festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. Zunächst basiert die Satzgröße auf der Größe des Großbuchstabens M der aktuellen Schriftart. Wenn die Schriftfamilie geändert wird, ändert sich ihre Größe. em erbt die Schriftgröße des übergeordneten Elements. (Es gibt Beispiele für em und rem unten)
Ohne CSS-Regeln: (1em == 16px == 0,17in == 12pt == 1pc == 4,2mm == 0,42cm)
div{width:40em;}re em: rem ist eine relative Einheit wie em, aber im Gegensatz zu em ist rem immer relativ zum Wurzelelement (z. B.: root{}), im Gegensatz zu em, das die Kaskadenmethode zur Berechnung der Größe verwendet . Diese relative Einheit ist einfacher zu verwenden.
div{width:40rem;}Beispiel: Relative Längeneinheit, relativ zur Höhe des Zeichens. Standardschriftgröße. Im Gegensatz zu em ändert sich em nicht, wenn die Schriftfamilie geändert wird, aber die ex-Einheit ändert sich, da der Wert einer Einheit und dieser Schriftart einer besonderen Einschränkungsbeziehung unterliegen.
div{width:40ex;}ch: Die Konnotation von ch ähnelt der Höhe von ex relativ zu x, mit der Ausnahme, dass ch auf der Breite des Zeichens 0 und nicht auf der Höhe des Zeichens x basiert. 1ch ist die Breite der Zahl 0. Wenn sich die Schriftfamilie ändert, ändert sich auch ch.
div{width:40ch;}vw: vw (Blickpunktbreite) ist die visuelle Breiteneinheit (Fensterbreite). Die vw-Einheit ist dem Prozentsatz sehr ähnlich von vw gilt für alle Elemente, unabhängig von ihrem übergeordneten Element oder der Breite des übergeordneten Elements, ein bisschen wie rem-Einheiten sind sie immer relativ zum Stammelement. (Es gibt Beispiele für vh und vw unten)
div{width:40vw;}vh: Die Einheiten von vh (Ansichtsfensterhöhe) und vw (Ansichtsfensterbreite) sind gleich. Der Unterschied zwischen vh und der Höhe des Sichtbereichs (Fensterhöhe) ist gleich.
div{width:40vh;}vmin: Der Wert von vmin ist der kleinere Wert unter den aktuellen vw- und vh-Einheiten, verglichen mit den vw- und vh-Einheiten, die die Bildschirmgröße selbst bestimmen.
div{width:40vmin;}vmax: Der Wert von vmax ist der größere Wert zwischen vw und vh.
div{width:40vmax;}%: Prozent, der Längenwert in Prozent basiert auf dem Längenwert des übergeordneten Elements mit demselben Attribut. Beispiel: Wenn die Breite eines Elements 450 Pixel beträgt und die Breite des untergeordneten Elements auf 50 % eingestellt ist, dann Das untergeordnete Element wird gerendert. Die Breite beträgt 225 Pixel. (Wenn kein spezifischer Wert für alle übergeordneten Elemente festgelegt ist, führt das Festlegen der prozentualen Höhe dazu, dass der Wert aller Elemente 0 ist.)
div{width:40%;}fr: Eine im Rasterlayout verwendete Längeneinheit. Im Rasterlayout verwenden wir häufig fr für die Berechnung.
Die folgende Anweisung deklariert ein Raster mit drei Zeilen. Die Höhe der ersten Zeile beträgt 30 Pixel, die Höhe der zweiten Zeile beträgt ebenfalls 30 Pixel und die Höhe der dritten Zeile beträgt 60 Pixel.
Rastervorlagenzeilen:30px1fr2fr;
Beispiel:
<!DOCTYPEhtml><html><head><title>Relative Längeneinheit</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;</style></head><body><divclass=box>Dies ist eine 16px-Schriftart<pclass=info>Dies ist eine 2em-Schriftart</p><pclass=ex>x:< span>Dies ist die Schriftart von 3ex</span></p><pclass=ch>0: <span>Dies ist die Schriftart von 4ch</span></p></div></body></ html>Unten dargestellt:
3. Zusammenfassung der Längeneinheiten:
(1) Zunächst müssen wir eines verstehen: Was genau ist die Bildschirmauflösung? Wir wissen, dass die Pixelgröße bei unterschiedlichen Auflösungen unterschiedlich ist, also bei derselben Webseite in Pixel Bei Verwendung als Längeneinheiten sind die angezeigten Größen bei unterschiedlichen Auflösungen unterschiedlich. Bei niedrigen Auflösungen sind die Pixel größer und die Details sind nicht klar genug. Die angezeigte Seite ist zwar ebenfalls groß, aber unscharf.
(2) Tatsächlich werden alle Einheiten, egal ob relative oder absolute Einheiten (bei der Anzeige auf dem Bildschirm), schließlich in px-Einheiten konvertiert. Daher wird bei der Erstellung von Webseiten im Allgemeinen die Grundeinheit px anstelle von pt gewählt, da pt ist wird auch in px konvertiert, um über die DPI des Browsers angezeigt zu werden (z. B. beträgt die DPI von Firefox 96, dann ist 9pt = 12px). Es werden nicht nur pt, cm, in, mm und andere Einheiten in px umgewandelt. Unabhängig davon, ob sie absolut oder relativ sind, ändert sich die Länge bei unterschiedlichen Auflösungen unterschiedliche Auflösungen Die Auflösung bleibt unverändert bei 3cm.
(3) Ich denke, pt ist immer noch eine sehr nützliche Einheit, insbesondere beim Drucken. Jetzt wurden einige Webseiten implementiert, um eine Seite anzuzeigen und auf eine andere Weise zu drucken. Verwenden Sie pt Nun, denn bei unterschiedlichen Auflösungen sind die gedruckten Seiten alle gleich groß. Dies ist das erste Merkmal der absoluten Einheit, aber Sie müssen dennoch bedenken, dass diese Einheit auf dem Display nicht die tatsächliche physische Länge darstellt muss entsprechend der tatsächlichen Größe des Pixels angepasst werden (dies hängt mit der Auflösung zusammen).
(4) Tatsächlich können wir es so verstehen: Betrachten Sie px als absolute Einheit (absolute Einheit auf dem Display) und andere Einheiten basieren darauf, wie z. B. em, die Höhe relativ zur aktuellen Textschriftart ( Angenommen, die aktuelle Textschriftgröße beträgt 12 Pixel und wir setzen die neue Schriftart auf 1,5 em. Dann wird die neue Schriftgröße in 12 * 1,5 = konvertiert 18px), was Sie beachten müssen, ist, dass em die Höhe relativ zum übergeordneten Element ist. Angenommen, wir setzen die Schriftart auf 12px im ersten Div, 1,5em in der zweiten Ebene und 1,5em in der dritten Ebene. Die Schriftartanzeige ist: erste Ebene 12px, zweite Ebene 18px, dritte Ebene 18 * 1,5 = 27px.