HTML / CSS LEVEL 1

Teil 3

CSS

Visual Formatting Model

CSS Boxes

Block Box

  • Block Formatting Context
  • Eine Box nach der Anderen, vertikal aufeinanderfolgend

<div></div>

<p></p>

Inline Box

<a></a>

<span></span>

<strong></strong>

  • Inline Formatting Context
  • Wurde für Textfluss entwickelt
  • Eine Box nach der Anderen, horizontal aufeinanderfolgend
  • Boxen werden in "line boxes" aufgeteilt (Zeilen)

Inline Block Box

Der Hermaphrodit under den Boxen

  • Inline Formatting Context
  • Gegen Aussen Inline Box, im Inneren Block Box

Box Typ Bestimmen

CSS Box Model

padding

border

margin

Box Content

(Innenabstand)

(Rand)

(Aussenabstand)

Welches Box Model?

width: 300px;

width: 300px;

box-sizing: content-box;

box-sizing: border-box;

Übung

Box Model anwenden mit Textfluss und Block Elementen

Ressourcen

Bins

HTML / CSS I - Teil 3

By Gion Kunz

HTML / CSS I - Teil 3

  • 1,111
Loading comments...

More from Gion Kunz