Les 4: Boxmodel en borders

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:

  1. margin (ruimte tussen de rand en het parent element)

  2. border (de rand om het element)

  3. padding (de ruimte tussen de inhoud en de rand)

  4. 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>

<html>
  <head>
  </head
  <body>
    <ul>
      <li>Dit is een hoofdstuk</li>
    </ul>
    <p>Dit is een stukje tekst.</p>
  </body>
</html>

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)

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

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.

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}

Opdrachten

[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

PreviousLes 3: Kleuren en achtergrondplaatjeNextLes 5: Margin, padding en development tools

Last updated