Längeneinheiten in CSS
In CSS werden die Längeneinheiten verwendet, um die Dimension eines HTML -Elements zu definieren. Diese Einheiten können sowohl feste Werte als auch dynamische Werte für eine ansprechende Schnittstelle haben. Aus diesem Grund werden sie in zwei Klassen eingeteilt Absolut und relativ. Der absolut Die Klasse enthält die Einheiten, die feste Werte anbieten, während die relativ Die Klasse hat Einheiten, die ihre Werte entsprechend ihrem Eltern- oder Stammelement ändern.
Die Längeneinheiten werden hauptsächlich verwendet, um Breite, Höhe, Polsterung, Rand, Rand, Schriftgröße und vieles mehr zu setzen. In Anbetracht der Wichtigkeit bietet dieser Leitfaden einen Überblick über Längeneinheiten in CSS mit den folgenden Lernergebnissen.
- Liste der Längeneinheiten in der absoluten Klasse
- Liste der Längeneinheiten in der relativen Klasse
- Verwendung von Einheiten mit absoluten Längen und relativen Längeneinheiten
CSS Länge Einheiten
In diesem Abschnitt werden die Längeneinheiten in ihrer jeweiligen Kategorie aufgeführt. Die Längeneinheiten werden weitgehend in zwei Kategorien eingeteilt, Absolut und relativ. Erforschen wir die Einheiten, die unter diese Kategorien und ihre Verwendung fallen.
So verwenden Sie Einheiten mit absoluten Länge
Diese Kategorie enthält die Längeneinheiten, die haben fester Wert im gesamten Dokument. In Situationen, in denen die feste Größe eines Elements erforderlich ist, dienen diese Einheiten dem Zweck besser. Die Einheiten der absoluten Länge sind jedoch nicht für reaktionsschnelle Designs geeignet. Die folgende Tabelle enthält die Liste und Beschreibung der Einheiten der absoluten Länge.
| Einheit | Symbol | Beziehung |
|---|---|---|
| Zoll | In | 1in = 1in oder 1in = 96px |
| Zentimeter | cm | 1in = 2.5cm oder 1 cm = 38px |
| Millimeter | mm | 1in = 25 mm oder 1 mm = 3.84px |
| Picas | PC | 1in = 6pc oder 1pc = 16px |
| Punkte | pt | 1in = 72pt oder 1pt = 1.13px |
| Pixel | px | 1in = 96px oder 1px = 1px |
In der obigen Tabelle ist die größte Einheit "Zoll (in)" während die kleinste Einheit ist "Pixel (PX)". Darunter die px Die Einheit wird am meisten geübt.
Beispiel: Verwenden von Einheiten mit absoluten Längen
Der folgende Code zeigt die Verwendung von In, PX-, PT- und MM -Einheiten von Länge.
Html
Breite & Höhe in Pixel (PX)
Breite und Höhe in Punkten (PT)
Breite und Höhe im Millimeter (MM)
Im obigen Code sind drei Absätze in a eingeschlossen Einzelelement (dient als übergeordnetes Element)
CSS
Aus den oben genannten CSS die Divibreite und Höhe von Element ist in Zentimeter, während PX, PT und MM werden als Längeneinheiten in Absätzen verwendet.
Ausgang
Aus der Ausgabe wird beobachtet, dass die untergeordneten Elemente (Absätze) nicht von ihrem übergeordneten Element beeinflusst werden ().
So verwenden Sie relative Länge Einheiten
Die relativen Längeneinheiten manipulieren die Größe des Elements in Bezug auf ihr Eltern- oder Wurzelelement dynamisch. Die folgende Liste bezieht sich auf die relativen Länge der CSS.
| Einheit | Symbol | Beschreibung |
|---|---|---|
| Prozentsatz | % | Der relative Prozentsatz des übergeordneten Elements |
| Flüchtig | em | Bezieht sich auf die Schriftgröße des übergeordneten Elements |
| Wurzel -Ephemeral | rem | Bezieht sich auf die Schriftgröße des Wurzelelements |
| Ansichtsfensterbreite | VW | Relativ zur Browser-Window-Breite |
| Ansichtsfensterhöhe | VH | Relativ zum Browser-Window-Height |
| Charakter | CH | Relativ zur Breite des Charakters "0" |
| Ex -Einheit | ex | Relativ zur Höhe von „x (niedrigerer Fall)“ “ |
| Minimum des Ansichtsfenfers | vmin | Der Vmin bezieht sich auf die minimale Höhe oder Breite des Browser-Windows |
| Ansichtsfenster maximal | vmax | Der VMAX bezieht sich mit der maximalen Höhe/Breite des Browser-Windows |
Notiz: Falls es kein übergeordnetes Element gibt, werden die Einheiten gemäß dem Stammelement angepasst ().
Beispiel: Verwenden von Einheiten mit relativen Längen
Dieses Beispiel bietet die Verwendung verschiedener relativer Längeneinheiten.
Html
Breite und Höhe im Prozentsatz nach übergeordnetem Element
Breite und Höhe in EM (gemäß Eltern)
Breite und Höhe in REM (nach Wurzel)
Im obigen Code werden drei Absätze erstellt und in a enthalten übergeordnetes Element (Div). Diese Absätze verwenden verschiedene relative Längeneinheiten (Prozentsatz, EM und REM) die Breite und Höhe einstellen.
CSS
Im obigen CSS -Code wird die Breite, die Höhe, die Hintergrundfarbe und der Rand des übergeordneten Elements definiert. Der .pro , .em und .REM -Klassen definieren die Höhe/Breite in Prozent (%), kurzlebig (EM) und Wurzel -Ephemeral (REM).
Notiz: Da die Standardschriftengröße von Div 16px ist, ist es daher 16px 1em = 16px und 1REM = 16px. Der rem Legt die Größe nach dem Wurzel (Körper-) Element fest, während die em würde den Wert gemäß dem übergeordneten Element (Div) festlegen.
Ausgang
Aus dem Ausgang wird beobachtet, dass die Prozentsatz und EM -Einheiten Passen Sie die Breite/Höhe entsprechend dem übergeordneten Element (Div) an, während die rem Die Einheit legt die Breite/Höhe in Bezug auf das Wurzelelement (Körper) fest.
Abschluss
In CSS werden die Längeneinheiten in zwei breitere Kategorien eingeteilt: Absolutlängeneinheiten und relative Längeneinheiten. Die Einheiten der absoluten Länge haben feste Werte, während die relativen Einheiten ihre Werte entsprechend ihrem Eltern- oder Wurzelelement ändern. Die absoluten Längeneinheiten sind PX, PT, PC, IN, CM und MM sowie die Einheiten %, EM, REM, VW, VHM VMIN, VMAX, und Ex fallen unter relative Einheiten. Für ein besseres Verständnis haben wir die Verwendung dieser Einheiten mit Hilfe von Beispielen demonstriert.