Grundaufbau Part I

README.md

@@ -1,3 +1,57 @@
 # CSS-Explained
 
-A Site to remember all the important, way-to-complex and boring stuff about CSS.
+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](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.