Was sind die Längeneinheiten in CSS?

CSS-Längeneinheiten umfassen Pixel, Prozentsatz, em, rem, vw, vh, vmin, vmax, pt, cm, mm und in usw. Detaillierte Einführung: 1. Pixel ist die am häufigsten verwendete Längeneinheit. Sie stellt einen physischen Pixel auf dem Bildschirm dar. Auf verschiedenen Geräten kann 1 Pixel unterschiedlichen physischen Größen entsprechen, auf demselben Gerät sind Pixel jedoch eine relativ feste Einheit. 2. Die prozentuale Einheit wird relativ zur Größe des übergeordneten Elements berechnet. Wenn die Breite eines Elements auf 50 % eingestellt ist, beträgt seine Breite die Hälfte der Breite des übergeordneten Elements usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Es gibt in CSS mehrere Längeneinheiten, mit denen die Größe und der Abstand von Elementen definiert werden. Im Folgenden sind einige häufig verwendete CSS-Längeneinheiten aufgeführt:

1. Pixel (px): Pixel ist die am häufigsten verwendete Längeneinheit, die ein physisches Pixel auf dem Bildschirm darstellt. Auf verschiedenen Geräten entspricht 1 Pixel möglicherweise unterschiedlichen physikalischen Abmessungen, auf demselben Gerät sind Pixel jedoch eine relativ feste Einheit.

2. Prozent (%): Die Prozenteinheit wird relativ zur Größe des übergeordneten Elements berechnet. Wenn die Breite eines Elements beispielsweise auf 50 % eingestellt ist, beträgt seine Breite die Hälfte der Breite des übergeordneten Elements.

3. em (em): Die em-Einheit wird relativ zur Schriftgröße des Elements berechnet. Wenn beispielsweise die Schriftgröße eines Elements auf 2em eingestellt ist, sind seine Abmessungen doppelt so groß wie die Schriftgröße des übergeordneten Elements.

4. rem (rem): Die rem-Einheit wird relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements) berechnet. Im Gegensatz zu em wird die Berechnung von rem-Einheiten nicht von der Schriftgröße des übergeordneten Elements beeinflusst.

5. vw und vh: Die Einheiten vw und vh repräsentieren den Prozentsatz der Ansichtsfensterbreite bzw. der Ansichtsfensterhöhe. Der Viewport bezieht sich auf den sichtbaren Bereich des Browserfensters oder Gerätebildschirms. Wenn die Breite eines Elements beispielsweise auf 50 vw eingestellt ist, beträgt seine Breite die Hälfte der Breite des Ansichtsfensters.

6. vmin und vmax: Die Einheiten vmin und vmax stellen den kleineren bzw. größeren Wert der Ansichtsfensterbreite bzw. Ansichtsfensterhöhe dar. Wenn die Höhe eines Elements beispielsweise auf 50 vmin eingestellt ist, ist seine Höhe halb so groß wie die Breite des Ansichtsfensters oder die Höhe des Ansichtsfensters.

7. pt (Punkt): Die pt-Einheit ist eine häufig verwendete Längeneinheit in der Druckindustrie. 1 pt entspricht 1/72 Zoll.

8, cm (Zentimeter): Die Einheit von cm ist Zentimeter, 1 cm entspricht 10 Millimeter.

9, mm (Millimeter): Die Einheit von mm ist Millimeter.

10. Zoll (Zoll): Die Einheit von Zoll ist Zoll, 1 Zoll entspricht 2,54 Zentimeter.

Zusätzlich zu den oben genannten häufig verwendeten Längeneinheiten verfügt CSS auch über einige andere relative und absolute Einheiten wie ex, ch, pc usw. Ihre Verwendung ist relativ begrenzt und wird im Allgemeinen nicht häufig für Layout- und Größendefinitionen verwendet .

In der tatsächlichen Entwicklung hängt die Auswahl der geeigneten Längeneinheit von den spezifischen Bedürfnissen und Designanforderungen ab. Im Allgemeinen eignen sich relative Einheiten (wie Prozentsätze, em, rem usw.) besser für responsive Layouts und die Entwicklung mobiler Geräte, während absolute Einheiten (wie Pixel, Zentimeter usw.) besser für die Definition fester Einheiten geeignet sind. Größenelemente und Typografiestile. Gleichzeitig müssen Sie auf die Umrechnung und Kompatibilität zwischen verschiedenen Einheiten achten, um Größenverwechslungen oder abnormale Anzeigen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWas sind die Längeneinheiten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!