HTML / CSS LEVEL 1

Teil 3

CSS

Visual Formatting Model

CSS Boxes

Block Box

http://jsbin.com/hacete/1/edit?html,css,output

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

<div></div>

<p></p>

Inline Box

http://jsbin.com/beleqo/1/edit?html,css,output​

<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

http://jsbin.com/beleqo/1/edit?html,css,output​

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

Box Typ Bestimmen

http://jsbin.com/beleqo/1/edit?html,css,output​

• Gängige Block Boxen
  • div, h1, p u. weitere: 
    https://developer.mozilla.org/de/docs/Web/HTML/Block-level_elemente
• Gängige Inline Boxen
  • span, a, strong, em, img
    https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
• ​Box type ändern mit display property
  • ​display: block
  • display: inline
  • display: inline-block

CSS Box Model

Box Content

https://css-tricks.com/the-css-box-model/

Welches Box Model?

http://jsbin.com/munuje/1/edit?html,css,output

width: 300px;

width: 300px;

box-sizing: content-box;

box-sizing: border-box;

Übung

Box Model anwenden mit Textfluss und Block Elementen

http://jsbin.com/lamewe/1/edit?html,css,output​

http://jsbin.com/fowuye/1/edit?html,output​

Ressourcen

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model​

http://de.learnlayout.com/box-model.html​

http://www.intensivstation.ch/css/box-model/

Bins

http://jsbin.com/wiheci/edit?html,css,output​

http://jsbin.com/jumisu/edit?html,css,output​

http://jsbin.com/hazuyop/edit?html,css,output