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;
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.
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!