1. HET BOX MODEL

2. In CSS werk je met „boxes‟
 Elk HTML-doosje wordt door CSS als een box
behandeld.
 Dat heet het BOX-model van CSS
 Let op: Zowel inline als block elementen zijn
boxes!
 Een box is een rechthoek, met een breedte en
een hoogte
 De afmetingen kunnen ook 0 zijn

3. De standaard eigenschappen van
een box
 De standaard eigenschappen van een
element/box worden bepaald door de browser,
zoals bijvoorbeeld:
 De marges tussen <p>‟s
 De regelafstand in een <p>
 De linkermarge van een <h1>
 De rand om een <img>
 CSS kan dat allemaal wijzigen, en meer

4. Een box met 3 eigenschappen
Box-breedte: 300px
width: 300px
width: 300px; height: 100px; background-color: teal;

5. Een box heeft inhoud
Box-breedte: 300px
width: 300px
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
Inhoud erin

6. Meer ruimte in de box
Box-breedte: 340px
width: 300px
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
padding: 20px;

7. Randen om de box
Box-breedte: 360px
width: 300px
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
border: 10px solid red;

8. Meer ruimte om de box
Box-breedte: 420px
width: 300px
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
margin: 30px;

9. De uiteindelijke grootte:
300 + 40 + 20 + 60= 420px
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
inhoud inhoud inhoud inhoud inho
{width : 300px; height : 100px; padding : 20px; border :10px solid
red; margin : 30px;}

10. De grootte van de box
 Een box kan dus veel groter zijn dan je
opgegeven width!
 Padding, border en margin komen erbij.

11. Helaas, Internet Explorer
 Oudere versies van IE (t/m versie 5.5) deden
het fout:
 De uiteindelijke grootte bestond uit width + margin
 En padding en border vielen binnen de width!
 De uiteindelijke breedte van de vorige box was
geen 420px maar 360px
 Groot probleem voor acceptatie van layout met
CSS.

12. POSITIE

13. Wat is je positie?
 In CSS kunnen boxes gepositioneerd worden.
 Je kunt o.a. de top en left bepalen
top: 40px;
left: 45px

14. Drie soorten posities
 Boxes kunnen een van de drie volgende
posities hebben:
 Statisch {position: static;}
 Precies bepaald {position: absolute}
 T.o.v normale plaatsing {position: relative}
 Boxes zijn standaard static
 Let op: Top en Left werken alleen in absolute
en relative positie
 Posities worden bepaald t.ov. de ouder

15. What You See is What You Get
 Veel WYSIWYG-editors werken met de
absolute position van boxes.
 Voordeel: positie en grootte van een element
is pixelprecies op de pagina aan te geven.
 Nadeel: Alleen handig als je van te voren al
weet hoe groot iets moet worden, hoeveel
tekst er precies in een box moet.

16. Voorbeeld code van absolute
position:
 <p style=“position :absolute; left :140px; top :200px;
width : 400px; height : 300px; background-color :
yellow; margin : 10px; padding : 2px;”>Deze
paragraaf staat op een precieze plek op het
scherm!</p>
Deze paragraaf staat op een precieze
plek op het scherm

17. Twee boxes met marge, naast
elkaar
{margin: 20px;}
De boxes staan 40px van elkaar af!

18. Twee boxes met marge, onder
elkaar
De grootste marge telt
{margin: 20px;}
De boxes staan 20px van elkaar af!

19. Dit was een presentatie van
pc-coach