Was sind CSS-Einheiten?

CSS-Einheiten sind standardisierte Werte, die zum Messen und Beschreiben der Größe, des Abstands und anderer Eigenschaften von Elementen verwendet werden. Sie werden verwendet, um die Größe, Position, den Abstand, die Schriftgröße usw. von Elementen anzugeben zwei Kategorien: absolute Einheiten und relative Einheiten. Absolute Einheiten eignen sich für Elemente fester Größe und typografische Stildefinitionen, während relative Einheiten für responsive Layouts und die Entwicklung mobiler Geräte geeignet sind. Durch die rationelle Auswahl und Kombination dieser Einheiten können flexible Layout- und Größendefinitionen erreicht werden, die für ein gutes Benutzererlebnis sorgen.

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

CSS-Einheiten sind standardisierte Werte, die zum Messen und Beschreiben von Elementabmessungen, Abständen und anderen Eigenschaften verwendet werden. Sie werden verwendet, um Größe, Position, Abstand, Schriftgröße usw. eines Elements festzulegen. CSS-Einheiten können in zwei Kategorien unterteilt werden: absolute Einheiten und relative Einheiten.

1. Absolute Einheit:

- Pixel (px): Pixel ist die am häufigsten verwendete absolute Einheit und repräsentiert ein physisches Pixel auf dem Bildschirm. Pixel sind eine relativ feste Einheit und können auf verschiedenen Geräten unterschiedlichen physikalischen Größen entsprechen.

- Zoll (in): Zoll ist die internationale Standardeinheit, 1 Zoll entspricht 2,54 Zentimeter.

- Zentimeter (cm): Zentimeter ist die internationale Standardeinheit, 1 Zentimeter entspricht 10 Millimetern.

- Millimeter (mm): Millimeter ist die internationale Standardeinheit, 1 Millimeter entspricht 0,1 Zentimeter.

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

- Doppelter Druckpunkt (Stk): Der doppelte Druckpunkt ist eine häufig verwendete Einheit in der Druckindustrie, 1 Stück entspricht 12 Punkten.

2. Relative Einheit:

- Prozent (%): Die prozentuale Einheit 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.

- 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.

- 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.

- Breite des Ansichtsfensters (vw): Die Einheit vw stellt den Prozentsatz der Breite des Ansichtsfensters dar. 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.

- Höhe des Ansichtsfensters (vh): Die Einheit vh stellt den Prozentsatz der Höhe des Ansichtsfensters dar. Wenn die Höhe eines Elements beispielsweise auf 50 Vh eingestellt ist, beträgt seine Höhe die Hälfte der Höhe des Ansichtsfensters.

- Mindestgröße des Ansichtsfensters (vmin): Die Einheit vmin stellt den Prozentsatz der kleineren Ansichtsfensterbreite und 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.

- Maximale Größe des Ansichtsfensters (vmax): Die Einheit vmax stellt den Prozentsatz der größeren Ansichtsfensterbreite und Ansichtsfensterhöhe dar.

Die Wahl der CSS-Einheiten hängt von den spezifischen Bedürfnissen und Designanforderungen ab. Absolute Einheiten eignen sich für Elemente fester Größe und typografische Stildefinitionen, während relative Einheiten für responsive Layouts und die Entwicklung mobiler Geräte geeignet sind. Durch die rationelle Auswahl und Kombination dieser Einheiten können flexible Layout- und Größendefinitionen erreicht werden, die für ein gutes Benutzererlebnis sorgen. Darüber hinaus müssen Sie auch auf die Umrechnung und Kompatibilität zwischen verschiedenen Einheiten achten, um Dimensionsverwechslungen oder abnormale Anzeigen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWas sind CSS-Einheiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!