CSS -Einheiten | Erklärt
Die Ergebnisse dieses Blogs sind:
- Was sind CSS -Einheiten??
- Was sind Einheiten mit absoluter Länge in CSS?
- So verwenden Sie Einheiten für absolute Länge in CSS?
- Was sind relative Längeneinheiten in CSS?
- So verwenden Sie relative Längeneinheiten in CSS?
Was sind CSS -Einheiten??
Es gibt verschiedene Einheiten in CSS, die zum Hinweis auf eine Länge oder zur Messung der CSS -Eigenschaft verwendet werden. Zum Beispiel in einer CSS -Datei die “SchriftgrößeEigenschaft wird ein Wert von "zugewiesen"25px", Was die Zahl mit der Einheit darstellt"Pixel”(PX). Darüber hinaus sollte es in der Anzahl und der relevanten Messeinheit keine Weißespace geben. Wenn der Längenwert jedoch 0 beträgt, können die Einheiten ausgeschlossen werden.
Die CSS -Längeneinheiten sind von zwei Arten: relativ und absolut.
Was sind Einheiten mit absoluter Länge in CSS?
Einheiten der absoluten Länge hängen von einer tatsächlichen physischen Einheit ab. Normalerweise haben sie die gleiche Größe auf verschiedenen Geräten. Diese Einheiten werden für die Verwendung auf den Bildschirmen nicht empfohlen, da die Bildschirmgröße variiert. Es werden jedoch absolute Längeneinheiten verwendet, wenn die Größe des Bildschirms bekannt ist. Diese Arten von Einheiten sind auch bei Aufgaben nützlich, bei denen die Reaktionsfähigkeit keine Rolle spielt.
So verwenden Sie Einheiten für absolute Länge in CSS?
In CSS werden mehrere absolute Einheiten verwendet. Einige von ihnen sind unten gezeigt:
| Einheit | Beschreibung |
| pt | Gibt die Messung in Punkten an. 1pt = 1/72 von 1 Zoll. |
| In | Gibt die Messung in Zoll an. 1in = 96px = 2.54 cm |
| px | Gibt die Messung in Pixeln an. 1px = 1/96. Zoll Zoll. |
| cm | Gibt die Messung in Zentimetern an. |
Gehen wir das Beispiel durch, in dem Einheiten mit absoluten Längen verwendet werden.
Beispiel: Verwenden von Einheiten mit absoluten Längen in CSS
Fügen Sie in HTML zunächst ein DIV mit Inline -CSS -Stil hinzu, mit “Rand" Und "Polsterung" Eigenschaften. Dann ist die
Das Tag wird platziert, um der Seite eine Überschrift hinzuzufügen. Mehrere
Tags werden mit dem Relevanten hinzugefügt “Schriftgröße”In Zahlen mit unterschiedlichen Einheiten:
Die Eigenschaft "Schriftgröße"
Schriftgröße: 20px
Schriftgröße: 20pt
Schriftgröße: 20in
Schriftgröße: 20 cm
Schriftgröße: 20 mm
Es kann beobachtet werden, dass der Text mit Werten mit unterschiedlichen CSS -absoluten Längen auf der Webseite angezeigt wurde:
Was sind relative Längeneinheiten in CSS?
In CSS geben relative Längeneinheiten die Länge relativ zur entsprechenden Länge Eigenschaft an. Im Vergleich zu den absoluten Längen sind die relativen Längeneinheiten viel besser, da sie eine Skalierung zwischen mehreren Rendering -Medien bieten.
So verwenden Sie relative Längeneinheiten in CSS?
Hier haben wir einige der am häufigsten verwendeten relativen Längeneinheiten in CSS eingetragen:
| Einheit | Beschreibung |
| VH | Höhe anzeigen: relativ zu 1% der Ansichtsfensterhöhe |
| VW | Ansichtsbreite: relativ zu 1% der Ansichtsfensterbreite |
| % | Prozentsatz: Es ist die Größe des Prozentsatzes im Vergleich zur Größe des Elternteils. |
| vmin | Ansichtsfenster Minimum: 1% der kleinsten Abmessungen des Ansichtsfenpfers. |
| vmax | Ansichtsfenster maximal: 1% der größten Abmessungen des Ansichtsfenpfers. |
Beispiel: Verwenden von Einheiten relativer Länge in CSS
Mit demselben HTML -Code werden wir nun nur den Wert der “ändernSchriftgrößeEigenschaft mit den relevanten relativen Längeneinheiten:
Die Eigenschaft "Schriftgröße"
Schriftgröße: 3VH
Schriftgröße: 3Ch
Schriftgröße: 3%
Schriftgröße: 3Rem
Schriftgröße: 3VW
Ausgang
So können Sie verschiedene CSS -Einheiten in unseren HTML -Dateien verwenden.
Abschluss
In CSS werden zwei Arten von Längeneinheiten verwendet: Absolutlängeneinheiten und relative Längeneinheiten. Die absoluten Längen beziehen sich nicht zu irgendetwas anderem. Sie sind in jeder Fenstergröße immer gleich, aber die relativen Längeneinheiten sind immer relativ zu etwas, wie dem übergeordneten Element, der Schriftart oder der Ansichtsfenstergröße. Dieser Artikel enthält einen umfassenden Leitfaden zu CSS -Einheiten, der Art der CSS -Länge und ihrer Verwendung.