Englisch
Französisch
Arabisch
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
CSS-Grundlagen
Hochgeladen :
vor 4 Monaten
Aktualisiert :
vor 4 Monaten
beginner
Die Eigenschaften für jeden Tag
Sie wissen, wie eine Regel aufgebaut ist. Hier sind die wichtigsten Eigenschaften für Farbe, Text, das Box-Modell und das Layout.
Häufige Eigenschaften
| Eigenschaft | Was sie steuert | Beispiel |
|---|---|---|
color | Textfarbe | color: #333; |
background | Hintergrundfarbe oder -bild | background: #fff; |
font-size | Textgröße | font-size: 16px; |
margin | Abstand außerhalb des Elements | margin: 16px; |
padding | Abstand innerhalb des Elements | padding: 8px; |
Das Box-Modell
Jedes Element ist eine Box: Inhalt, dann Padding, dann Rahmen, dann Margin. Das zu verstehen ist der Schlüssel zu Abständen und Größen.
.card {
padding: 16px; /* innen */
border: 1px solid #ddd;
margin: 12px; /* aussen */
}Nutzen Sie box-sizing: border-box
Damit zählt die width Padding und Rahmen mit — die Größe bleibt vorhersehbar. Oft global gesetzt: * { box-sizing: border-box; }
Modernes Layout: Flexbox
Flexbox ordnet Elemente in einer Reihe oder Spalte mit einfacher Ausrichtung an — ideal für Navigationsleisten, Karten und das Zentrieren.
.row {
display: flex;
gap: 16px;
justify-content: space-between;
align-items: center;
}Vermeiden Sie überall feste Pixel
Bevorzugen Sie relative Einheiten (rem, %, fr) und Flexbox/Grid, damit sich Ihr Layout an jeden Bildschirm anpasst.
Häufige Fragen
Was ist der Unterschied zwischen margin und padding?
Margin ist Abstand AUßERHALB des Rahmens; Padding ist Abstand INNERHALB, zwischen Inhalt und Rahmen.
Flexbox oder Grid?
Flexbox für eindimensionale Layouts (eine Reihe oder Spalte); Grid für zweidimensionale Layouts (Reihen und Spalten zugleich).
px, em oder rem?
Nutzen Sie
rem für Schriftgrößen und Abstände (skaliert mit der Wurzelschrift); px nur, wenn Sie wirklich eine feste Größe brauchen.