In CSS können Maßeinheiten auf verschiedene Arten verwendet werden, z.B. um Höhe, Breite, Schriftgröße usw. zu definieren. Es gibt mehrere Einheiten, die Sie verwenden können, und hier sind einige Beispiele:
1. Pixel (px): Diese Einheit bezieht sich auf Bildschirmpixel. Zum Beispiel, wenn Sie sagen `width: 300px;`, dann wird die Breite auf 300 Pixel festgelegt.
2. Prozent (): Diese Einheit bezieht sich auf einen Prozentsatz des Elternelements. Zum Beispiel, wenn das Elternelement eine Breite von 500px hat und Sie sagen `width: 50;`, dann wird die Breite auf 250px festgelegt (50% von 500px).
3. em: Diese relative Einheit bezieht sich auf die Schriftgröße des Elternelements. Wenn die Schriftgröße des Elternelements beispielsweise 16px beträgt und Sie sagen `font-size: 2em;`, dann wird die Schriftgröße auf 32px festgelegt (2 * 16px).
4. rem: Diese relative Einheit bezieht sich auf die Schriftgröße des Wurzelelements (d. h., das -Element). Die Verwendung ist ähnlich wie bei ‘em’.
5. vh/vw: Diese Einheiten beziehen sich auf den Viewport, d.h. den sichtbaren Bereich des Browsers. ‘vh’ steht für Viewport Height und ‘vw’ für Viewport Width. Wenn Sie sagen `height: 50vh;`, dann wird die Höhe auf die Hälfte der Höhe des Viewports festgelegt.
So benutzen Sie diese Einheiten in CSS:
```css
div {
width: 300px;
height: 50%;
font-size: 2em;
margin-left: 2rem;
padding-top: 10vh;
}
```
In diesem Beispiel wird die Breite des div-Elements auf 300 Pixel gesetzt, die Höhe auf 50% des Elternelements, die Schriftgröße auf das Doppelte der Schriftgröße des Elternelements, der linke Rand auf das Doppelte der Schriftgröße des Wurzelelements und der obere Abstand (Padding) auf 10% der Höhe des Viewports.
