Die CSS-Einheitenklassifizierung umfasst absolute Einheiten und relative Einheiten. Ausführliche Einführung: 1. Absolute Einheiten sind Einheiten, die sich auf physikalische Abmessungen beziehen, und ihre Werte bleiben in verschiedenen Geräten und Umgebungen festgelegt, einschließlich Pixel, Zoll, Zentimeter, Millimeter und Punkte. 2. Relative Einheiten sind Einheiten im Verhältnis zu anderen Größen oder In Umgebungen ändert sich sein Wert je nach Kontext. Relative Einheiten können ein reaktionsfähiges Layout implementieren und sich an die Anforderungen verschiedener Bildschirmgrößen anpassen, einschließlich Prozentsätzen, Fenstereinheiten, relativen Schriftarteinheiten und relativen Längeneinheiten. Die Wahl des richtigen Geräts ermöglicht eine präzise Steuerung und Anpassungsfähigkeit an unterschiedliche Bildschirmgrößen.
Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.
Einheiten in CSS können nach ihren Eigenschaften und Verwendungszwecken klassifiziert werden. Gemäß gängigen Klassifizierungsmethoden können CSS-Einheiten in die folgenden Kategorien unterteilt werden:
1 Absolute Einheiten: Absolute Einheiten sind Einheiten, die sich auf physikalische Abmessungen beziehen und deren Werte über verschiedene Geräte und Umgebungen hinweg konstant bleiben. Gängige absolute Einheiten sind:
- Pixel (Pixel, px): Pixel ist die am häufigsten verwendete absolute Einheit und stellt einen Punkt auf dem Bildschirm dar. Die Pixel sind fest und ändern sich nicht je nach Bildschirmgröße. In CSS werden Pixel häufig verwendet, um Attribute wie Größe, Abstand und Ränder von Elementen anzugeben.
- Zoll (Zoll): Zoll ist eine physikalische Einheit, die angibt, dass 1 Zoll 2,54 Zentimeter entspricht. In CSS können Sie die Größe eines Elements angeben, indem Sie Zoll als Größeneinheit verwenden.
- Zentimeter (cm): Zentimeter ist eine physikalische Einheit, die angibt, dass 1 Zentimeter 0,3937 Zoll entspricht. In CSS können Sie die Größe eines Elements angeben, indem Sie Zentimeter als Größeneinheit verwenden.
- Millimeter (mm): Millimeter ist eine physikalische Einheit, die angibt, dass 1 Millimeter 0,03937 Zoll entspricht. In CSS können Sie die Größe eines Elements angeben, indem Sie Millimeter als Größeneinheit verwenden.
- Punkt (Punkt, pt): Punkt ist eine physikalische Einheit, die angibt, dass 1 Punkt 1/72 Zoll entspricht. In CSS können Sie die Größe eines Elements angeben, indem Sie Punkte als Größeneinheit verwenden.
2. Relative Einheiten: Relative Einheiten sind Einheiten relativ zu anderen Dimensionen oder Umgebungen, und ihre Werte ändern sich je nach Kontextänderung. Relative Einheiten ermöglichen ein responsives Layout und passen sich an unterschiedliche Bildschirmgrößen an. Gängige relative Einheiten sind:
– Prozentsatz (%): Der Prozentsatz ist eine Maßeinheit relativ zum übergeordneten Element. In CSS können Sie Prozentsätze verwenden, um die Größe, Ränder, Abstände und andere Eigenschaften von Elementen anzugeben. Breite: 50 % bedeutet beispielsweise, dass die Breite des Elements 50 % der Breite des übergeordneten Elements beträgt.
- Viewport-Einheiten: Viewport-Einheiten sind Maßeinheiten relativ zum Browser-Viewport. Ansichtsfenstereinheiten ändern die Größe von Elementen basierend auf der Größe des Browserfensters. Gängige Fenstereinheiten sind:
– Ansichtsfensterbreite (vw): Die Fensterbreiteneinheit stellt einen Prozentsatz relativ zur Breite des Browserfensters dar. Beispielsweise bedeutet width: 50vw, dass die Breite des Elements 50 % der Breite des Browserfensters beträgt.
- Viewport Height (vh): Die Fensterhöheneinheit stellt den Prozentsatz relativ zur Höhe des Browserfensters dar. Beispielsweise bedeutet height: 50vh, dass die Höhe des Elements 50 % der Höhe des Browserfensters beträgt.
- Mindestbreite des Ansichtsfensters (vmin): Die minimale Breiteneinheit des Ansichtsfensters stellt den Prozentsatz im Verhältnis zur kleineren Breite und Höhe des Browserfensters dar. Beispielsweise bedeutet width: 50vmin, dass die Breite des Elements 50 % der kleineren Breite und Höhe des Browserfensters beträgt.
- Maximale Breite des Ansichtsfensters (vmax): Die maximale Breiteneinheit des Ansichtsfensters stellt den Prozentsatz im Verhältnis zur größeren Breite und Höhe des Browserfensters dar. Breite: 50vmax bedeutet beispielsweise, dass die Breite des Elements 50 % der größeren Breite und Höhe des Browserfensters beträgt.
- Relative Schriftarteinheiten: Relative Schriftarteinheiten sind Einheiten relativ zur Schriftgröße. Gängige relative Schriftarteinheiten sind:
- em: Die em-Einheit ist ein Vielfaches der Schriftgröße relativ zum Element. Beispielsweise bedeutet „font-size: 1.2em“, dass die Schriftgröße das 1,2-fache der Schriftgröße des übergeordneten Elements beträgt.
- rem: Die rem-Einheit ist ein Vielfaches der Schriftgröße relativ zum Stammelement (d. h. dem HTML-Element). Beispielsweise bedeutet „font-size: 1.5rem“, dass die Schriftgröße das 1,5-fache der Schriftgröße des Stammelements beträgt.
- ch: Die ch-Einheit ist ein Vielfaches der Breite des „0“-Zeichens. Beispielsweise bedeutet width: 10ch, dass die Breite des Elements das Zehnfache der Breite des Zeichens „0“ beträgt.
- Relative Längeneinheiten: Relative Längeneinheiten sind Einheiten relativ zu einem bestimmten Attributwert des Elements selbst. Gängige relative Längeneinheiten sind:
- rem: Die rem-Einheit ist ein Vielfaches der Schriftgröße relativ zum Stammelement (d. h. dem HTML-Element). In CSS können Sie rem-Einheiten verwenden, um die Größe, den Abstand, die Ränder und andere Attribute von Elementen anzugeben. Die rem-Einheit wird häufig verwendet, um relative Abmessungen der gesamten Seite zu implementieren.
-em: Die em-Einheit ist ein Vielfaches der Schriftgröße relativ zum Element. In CSS können Sie em-Einheiten verwenden, um die Größe, den Abstand, die Ränder und andere Attribute von Elementen anzugeben. Die Em-Einheit kann die Größe eines Elements basierend auf seiner eigenen Schriftgröße anpassen.
Die Auswahl dieser Einheiten hängt von den spezifischen Bedürfnissen und Designanforderungen ab. Absolute Einheiten eignen sich für Situationen, in denen eine präzise Steuerung der Größe erforderlich ist, während relative Einheiten für Situationen geeignet sind, in denen ein ansprechendes Layout und Anpassungsfähigkeit an unterschiedliche Bildschirmgrößen erforderlich sind. Bei der Auswahl der Einheiten müssen Sie die Unterschiede zwischen verschiedenen Geräten und Bildschirmen berücksichtigen, um sicherzustellen, dass die Seite auf verschiedenen Geräten konsistent und anpassbar ist.
Zusammenfassend lässt sich sagen, dass CSS-Einheiten nach ihren Eigenschaften und Verwendungszwecken klassifiziert werden können, einschließlich absoluter Einheiten (Pixel, Zoll, Zentimeter, Millimeter, Punkte) und relativer Einheiten (Prozentsatz, Fenstereinheiten, relative Schriftarteinheiten). Relative Einheiten können auch in relative Längeneinheiten unterteilt werden. Die Wahl des richtigen Geräts ermöglicht eine präzise Steuerung und Anpassungsfähigkeit an unterschiedliche Bildschirmgrößen.
Das obige ist der detaillierte Inhalt vonWas sind die Klassifizierungen von CSS-Einheiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
