Welche Einheiten sind in CSS verfügbar?

Zu den verfügbaren Einheiten für CSS gehören 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 Einheit, die ein physisches Pixel auf dem Bildschirm darstellt. Pixel ist eine relativ feste Einheit und kann auf verschiedenen Geräten unterschiedlichen physischen Größen entsprechen. 2. Die prozentuale Einheit bezieht sich auf das übergeordnete Element . Die Größe wird beispielsweise berechnet, wenn die Breite eines Elements auf 50 % eingestellt ist, dann ist seine Breite die Hälfte der Breite des übergeordneten Elements .

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

In CSS gibt es eine Vielzahl von Einheiten, mit denen sich die Größe, der Abstand und andere Eigenschaften von Elementen angeben lassen. Diese Einheiten können in zwei Kategorien unterteilt werden: absolute Einheiten und relative Einheiten. Hier sind einige häufig verwendete CSS-Einheiten:

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

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 Prozentsatz des kleineren bzw. größeren Werts 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. Relative Einheiten (wie Prozent, em, rem usw.) eignen sich besser für responsive Layouts und die Entwicklung mobiler Geräte, während absolute Einheiten (wie Pixel, Zentimeter usw.) besser für die Definition von Elementen mit fester Größe geeignet sind Typografiestile. Gleichzeitig müssen Sie auf die Umrechnung und Kompatibilität zwischen verschiedenen Einheiten achten, um Größenverwechslungen oder abnormale Anzeigen zu vermeiden.

Im Allgemeinen umfassen die verfügbaren Einheiten für CSS Pixel, Prozentsätze, em, rem, vw, vh, vmin, vmax, pt, cm, mm und in usw. Die Auswahl der richtigen Einheiten auf der Grundlage spezifischer Anforderungen ermöglicht eine flexible Layout- und Größendefinition und sorgt so für ein gutes Benutzererlebnis.

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