De elementen <p>, <h1>, <body>, <ul> zijn voorbeelden van block elementen. Er zijn ook inline elementen zoals <a>, <span> etc. Later leer je het verschil tussen inline en block elementen.
Je kunt deze blockelementen in je pagina zien als een doos (een box) met een inhoud erin.
Van buiten naar binnen zie het volgende:
margin (ruimte tussen de rand en het parent element)
border (de rand om het element)
padding (de ruimte tussen de inhoud en de rand)
de inhoud zelf
Bij blockelementen kun je de inhoud een hoogte en breedte geven. Voor één element is het boxmodel simpel genoeg. In een website heb je natuurlijk veel elementen die ook nog in elkaar zitten. Dus het kan behoorlijk complex worden! Ouder- en kindelementen (parent en child) horen bij elkaar. In de code hiernaast zie je:
<html> <- parent van <body>
<head> <- child van <html>
<body> <- parent van <ul>, child van <html>
<ul> <- parent van <li>, child van <body>
<li>
We beginnen met de randen (borders).
Een border heeft altijd 3 eigenschappen:
de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)
Je kunt ook ronde borders maken Je geeft dan de radius (straal) van de ronding op. Je doet dit voor iedere hoek apart en de volgorde is: linksboven, rechtsboven, rechtsonder, linksonder Je kunt ook in een keer alle hoeken gelijk maken.
[1] Maak borders om een aantal elementen in je pagina.
[2] Experimenteer met verschillende borders! Met ronde hoeken, verschillende stijlen enzovoort.
[3] Maak de opdracht in repl.it