Boxmodel

147 views
97 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
147
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Boxmodel

  1. 1. HET BOX MODEL
  2. 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. 3. De standaard eigenschappen vaneen 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. 4. Een box met 3 eigenschappen Box-breedte: 300px width: 300px width: 300px; height: 100px; background-color: teal;
  5. 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. 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. 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. 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. 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. 10. De grootte van de box Een box kan dus veel groter zijn dan je opgegeven width! Padding, border en margin komen erbij.
  11. 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. 12. POSITIE
  13. 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. 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. 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. 16. Voorbeeld code van absoluteposition: <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. 17. Twee boxes met marge, naastelkaar {margin: 20px;} De boxes staan 40px van elkaar af!
  18. 18. Twee boxes met marge, onderelkaar De grootste marge telt{margin: 20px;}De boxes staan 20px van elkaar af!
  19. 19. Dit was een presentatie vanpc-coach

×