V2_Document_Flow_BoxModell

Default Browser Styles

Wenn ihr kein CSS integriert, so werden dennoch nicht alle Elemente auf dieselbe Art von den Browsern dargestellt. Text in h1 ist grösser als in p, Links sind unterstrichen, alle h1 bis h6 haben Abstände (margin, padding) zu den folgenden Elementen. Diese Darstellung – ohne CSS – folgt den Default Browser Styles. https://www.w3schools.com/cssref/css_default_values.php
Wenn wir nun am Layout arbeiten, so müssen wir wissen, was das Default Verhalten ist und wie wir es verändern können.
Zwei Konzepte sind dabei besonders wichtig: der Document Flow und das Box Modell. Beide werden hier kurz erklärt.

Document Flow

Der Document Flow ist die Anordnung der Seitenelemente, wie sie durch die Positionierungsanweisungen und die Reihenfolge der HTML-Anweisungen definiert ist, d. h. wie die verschiedenen Elemente den Platz einnehmen und sich umeinander anordnen. Ohne CSS Anweisungen orientiert sich der Document Flow an der Textausrichtung (Westeuropäisch von links nach rechts und oben nach unten).

Beispiel Document Flow und Textausrichtung

body{
    /*writing-mode: vertical-lr; Testweise Kommentare entfernen*/
}
p{
    border:1px solid salmon;
}

<p>
        Absatz 1
</p>
<p>
        Absatz 2
</p>
<p>
        Absatz 3
</p>

Document Flow Westeuropäisch, writing-mode: horizontal-tb;

Ob die Elemente unter- oder nebeneinander stehen, hängt von zwei Aspekten ab.

• display Property
• verfügbarer Platz

Probier mal im Beispiel oben, die width von p auf 40% zu setzen. Theoretisch sollten zwei Elemente nebeneinander Platz haben, aber was beobachtest du? Dann ergänze mal das HTML mit span Tags, z.Bsp.: <span>Ich bin hervorgehoben</span>, gib den span Tags auch einen border per CSS, damit du sie siehst. Was beobachtest du nun?

Unterschied Block Level Elemente und Inline Elemente

Standardmässig hat jedes HTML Element einen Default Wert für die display Property, block oder inline.
Das Element p ist ein Block-Level Element, d.h. sein default Wert ist block.
Das Element span ist ein Inline-Level Element, d.h. sein default Wert ist inline.
Ein Block-Level-Element beginnt immer in einer neuen Zeile, und die Browser fügen vor und nach dem Element automatisch etwas Platz (einen Rand) hinzu.
Ein Block-Level-Element nimmt immer die gesamte verfügbare Breite ein (es erstreckt sich nach links und rechts so weit wie möglich).

Ein Inline-Element beginnt nicht in einer neuen Zeile. Ein Inline-Element nimmt nur so viel Breite wie nötig in Anspruch.

Beispiel block

p{
    width:40%;
    border:1px solid black;
}

.red{
     background-color:yellow;
}

<p>
        Absatz 1
</p>
<p>
        Absatz 2
</p>

Obwohl die beiden Absätze nebeneinander Platz hätten, sind sie untereinander gruppiert.

Beispiel inline

<h3>Why I <span class="red">Love</span> Cats</h3>

Der span Tag erlaubt uns, Teile aus dem Text zu gruppieren und anders zu formatieren. Der Textfluss wird nicht verändert.

@Todo: Studiert diese Seite auf w3c und verschafft euch einen Überblick über einige Block-Level und Inline-Level Elemente.

---

Box Modell

Das Box-Modell beschreibt, wie sich ein Element in Bezug auf seine Nachbarelemente anordnet, wie der Abstand zustande kommt, ob ein Umbruch folgt, etc. Das Box Modell ist schichtenartig aufgebaut, von innen nach aussen: width, border, padding, margin

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

• padding, border und margin werden zur Breite des Contents (width) hinzu addiert
• padding wird in der Farbe des Backgrounds angezeigt
• margin gibt Abstand zu anderen Elementen

https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

@Todo: Versuche einmal, einem Inline-Level (span) Element eine width, margin, padding zu geben. Was beobachtest du?

---