CSS-Explained

Intro

This is all about the things I learned the last few years working as a frontend designer. There have been many times I got so frustrated with the way CSS works (or doesn't in many situations). Often it was trial and error to get something done and more than once I stared at my display questioning my sanity for what I was seeing. Because I thought I knew what I was doing. In most cases I was wrong. Because I didn't understand all the details. In my opinion these details are very important to get the whole picture of how CSS works.

Disclaimer

I used Codepen to create the examples and images in this guide

Index

Background Infos

** TBD **

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.

3.1 KiB Raw Blame History