CSS - Maßeinheiten

Hallo da draußen, zukünftige Webdesigner! Heute machen wir uns auf eine aufregende Reise durch die Welt der CSS-Maßeinheiten. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diesen wichtigen Aspekt des Webdesigns zu führen. Also, hol dir deine virtuellen Lineale und lasst uns einige CSS-Maßeinheiten ausmessen!

LängenEinheiten

In CSS haben wir verschiedene Möglichkeiten, Größen zu messen und zu definieren. Es ist, als hättest du eine Werkzeugkiste voller verschiedener Lineale, die perfekt für spezifische Aufgaben sind. Fangen wir mit den Grundlagen an:

Absolute LängenEinheiten

Diese sind die direkten, wie die Zoll auf deinem Lineal:

Einheit	Beschreibung
px	Pixel
in	Zoll
cm	Zentimeter
mm	Millimeter
pt	Punkte
pc	Picas

Hier ist ein einfaches Beispiel:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

In diesem Code erstellen wir eine Box, die 100 Pixel breit, 2 Zoll hoch und mit einem Rand von 10 Millimetern ringsum hat. Es ist, als ob wir eine winzige, präzise Pappebox bauen!

CSS Maßeinheiten - em Einheit

Nun sprechen wir über die 'em'-Einheit. Es ist eine relative Einheit, die auf die Schriftgröße des Elements basiert. Stell dir vor, es ist ein Chamäleon, das seine Größe basierend auf seiner Umgebung ändert.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Das wird 24px sein */
padding: 2em;     /* Das wird 48px sein */
}

In diesem Beispiel ist die Schriftgröße der Kindkomponente 1,5 Mal so groß wie die ihrer Eltern, und ihr Rand ist doppelt so groß wie ihre eigene Schriftgröße. Es ist, als ob man eine russische Matroschka der Größen hat!

CSS Maßeinheiten - ch Einheit

Die 'ch'-Einheit basiert auf der Breite des '0' (Null)-Zeichens. Sie ist besonders nützlich für die Erstellung von Spaltenlayouts in Monospace-Schriften.

.code-block {
width: 80ch;
font-family: monospace;
}

Das erstellt einen Codeblock, der 80 Zeichen breit ist, perfekt für diejenigen, die nostalgisch für die Tage der 80-Spalten-Terminals sind!

CSS Maßeinheiten - rem Einheit

'rem' steht für "root em". Es ist ähnlich wie 'em', aber es bezieht sich immer auf das Wurzelelement (normalerweise

), nicht auf das Elternelement.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Immer 24px, unabhängig vom Elternteil */
padding: 2rem;     /* Immer 32px */
}

Dies ist großartig, um konsistente Größen throughout deinem Dokument beizubehalten, als hättest du eine Master-Zeichnung für deine gesamte Website.

CSS Maßeinheiten - lh und rlh Einheit

'lh' steht für die "Zeilenhöhe" des Elements, während 'rlh' die "Wurzel-Zeilenhöhe" ist. Diese sind neuere Einheiten, perfekt für den vertikalen Rhythmus in der Typografie.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Das setzt den Abstand unter dem Absatz auf genau eine Zeilenhöhe, was einen harmonischen vertikalen Rhythmus schafft. Es ist, als würde man ein Orchester aus Text leiten!

CSS Maßeinheiten - vh und vw Einheit

'vh' und 'vw' stehen für "viewport height" und "viewport width" respectively. Sie sind Prozenteinheiten, die auf die Größe der Ansichtsfenster basieren.

.hero {
height: 100vh;
width: 100vw;
}

Dies erstellt einen Hero-Bereich, der immer den gesamten Bildschirm füllt, unabhängig von der Gerätgröße. Es ist, als hättest du eine responsive Billboard, die immer perfekt passt!

CSS Maßeinheiten - vmin (viewport minimum) und vmax (viewport maximum) Einheit

Diese Einheiten basieren auf der kleineren oder größeren Dimension der Ansicht, je nachdem was angemessen ist.

.square {
width: 50vmin;
height: 50vmin;
}

Dies erstellt ein perfektes Quadrat, das immer die Hälfte der Größe der kleineren Ansichtsdimension beträgt. Es ist, als hättest du ein shape-shifting Quadrat, das immer proportional aussieht!

CSS Maßeinheiten - vb Einheit

'vb' steht für "viewport block size". Es ist ähnlich wie 'vh', aber es respektiert die Schreibweise des Dokuments.

.sidebar {
width: 20vb;
}

Dies erstellt eine Seitenleiste, die immer 20% der Blockdimension der Ansicht beträgt, was großartig für mehrsprachige Websites mit verschiedenen Schreibrichtungen ist.

CSS Maßeinheiten - vi Einheit

'vi' ist die "viewport inline size". Es ist wie 'vw', abermals respektiert es die Schreibweise.

.header {
height: 10vi;
}

Dies erstellt eine Kopfzeile, die immer 10% der inline-Dimension der Ansicht beträgt, die sich nahtlos an verschiedene Schreibweisen anpasst.

Beispiel - Prozente

Prozente in CSS beziehen sich immer auf etwas. Lassen Sie uns sie in Aktion sehen:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Hier ist der Behälter 80% der Breite seines Elternteils, zentriert mit automatischen Rändern. Das Kind ist halb so breit wie der Behälter, mit einem Polster, das 5% der Breite des Behälters beträgt. Es ist, als ob man Matrjoschka-Puppen mit unsichtbaren Kästen hat!

Beispiel - Zahlen

Manchmal benötigen CSS-Eigenschaften überhaupt keine Einheiten. Sehen wir uns einige Beispiele an:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Hier ist die Deckung ein Wert zwischen 0 und 1, die Zeilenhöhe ein Multiplikator der Schriftgröße und der z-Index einfach eine Zahl für die Stapelreihenfolge. Es ist, als hättest du einen Lautstärkeregler, einen Textabstand und einen Ebenensortierer alles in einem!

Und das war's, Leute! Wir haben die Welt der CSS-Maßeinheiten bereist, von den vertrauten Pixeln bis zu den exotischen Ansichtseinheiten. Denke daran, die richtige Einheit zu wählen ist wie das Auswählen des richtigen Werkzeugs für den Job - es kann dein Leben einfacher und deine Designs robuster machen. Also, los und maßvoll sein!

Credits: Image by storyset