CSS-Explained

A Site to remember all the important, way-to-complex and boring stuff about CSS. Bis zur Übersetzung ist dieser Text auf Deutsch

Browser

TBD

Spezifität von CSS Selektoren

TBD

Initialwerte / Defaults

Jedes HTML-Element besitzt Initialwerte für bestimmte Eigenschaften. Leider sind diese nicht immer ganz selbsterklärend. Eine gute Übersicht findet sich hier: https://www.w3schools.com/cssref/css_default_values.asp

Es kann nicht schaden sich für häufig genutzte Elemente zu merken, welche Layout Eigenschaften sie mitbringen. Im Beispiel:

Der body hat die Eigenschaften: display: block und margin: 8px
Überschriften haben die Eigenschaft display: block
Container haben die Eigenschaft display: block

Tipps zu Initialwerten

Initialwerte werden meist in einer reset.css Datei auf die gewünschten Werte festgelegt

Vererbung von Eigenschaften

TBD

Layout einer Seite aufbauen

Quelle: https://developer.mozilla.org/de/docs/Web/CSS/display

Display gibt das grundlegende Layoutverhalten eines Elementes an. Hier die gebräuchlichsten: (Die vollständige Liste erreicht man über den Link unten).

none
inline (Initialwert)
inline-block
block
flex
grid
table

display: none

Blendet das Element und sämtliche Unterelemente aus. Die Seite wird gerendet, wie als wenn das Element nicht im DOM existieren würde

display: inline vs. display: block

inline Elemente nehmen nur so viel Platz ein, wie ihr Inhalt benötigt
- Wichtig inline Elemente nehmen keine Werte für margin an.
block Elemente nehmen immer die gesamt verfügbare Breite ein
inline-block Elemente verhalten sich grundsätzlich wie block Elemente. Teilen sich mehrere inline-block Elemente die verfügbare Breite, verhalten sie sich wie inline Elemente
- Wichtig inline-block Elemente können Werte für margin annehmen.

Tipps und häufige Fragen

Die Seite hat einen Abstand zum Browserfenster

Auch das Body-Element hat Initialwerte, zu denen ein margin gehört. Dieses kann über margin: 0 entfernt werden.

2 Wege Elemente auszublenden

Ein display: none Element wird für den Aufbau der Seite komplett ingnoriert. Das Element nimmt keinen Platz auf der Seite ein
Mit visibility: hidden wird das Element nur ausgeblendet, sprich unsichtbar gemacht. Es nimmt weiterhin Platz auf der Seite ein.