MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Het CSS doosmodel is het fundament van layout op het Web — elk element wordt voorgesteld als een rechthoekige doos, met de inhoud, vulling, rand en marge rond die doos als de laagjes van een ajuin.  Tijdens het weergeven van de pagina-layout, bepaalt de browser welke stijlen moeten toegepast worden op elke doos, hoe groot de ui-laagjes zijn en waar de dozen zitten in verhouding tot de andere. Voor je kan begrijpen hoe je layouts kan creëeren met behulp van CSS, moet je het doosmodel leren.  Dat is wat we zullen doen in dit artikel.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe met files werken, en een basiskennis van HTML (bekijk Introductie tot HTML.)
Doelstelling: Leren hoe het CSS doosmodel werkt, en hoe individuele elementen op een pagina worden geplaatst.

Eigenschappen van de doos

Elk element in een document wordt weergegeven als een rechthoekige doos in layout, waarvan je de grootte en de "ui-lagen" kan aanpassen met behulp van enkele CSS eigenschappen.  De relevante eigenschappen zijn als volgt:

width en height

De width (breedte) en height (hoogte) eigenschappen stellen de breedte en hoogte in van de inhoud doos, welke de oppervlakte is waarbinnen de inhoud van de doos wordt weergegeven.  Deze inhoud kan bestaan uit tekst en/of uit andere dozen die de kinderelementen weergeven.

Opmerking: Er bestaan andere eigenschappen die toelaten om op subtielere wijze de grootte van de inhouddoos te manipuleren, door beperkingen in te stellen ipv. een absolute grootte.  Dit kan gedaan worden met volgende eigenschappen: min-width, max-width, min-height, en max-height.

padding
Vulling (padding) verwijst naar de binnenste marge van een CSS doos, tussen de buitengrens van de inhouddoos en de en de binnengrens van de rand.  De grootte van deze laag kan voor alle vier zijden in één keer ingesteld worden met behulp van de padding korte notatie, of één zijde per keer met behulp van de  padding-top, padding-right, padding-bottom en padding-left eigenschappen.
border
De rand (border) van een CSS doos zit tussen de buitengrens van de vulling en de binnengrens van de marge.  Standaard heeft deze een dikte van 0, waardoor ze onzichtbaar wordt, maar je kan de dikte, stijl en kleur van de rand instellen en die zo zichtbaar maken. De border korte notatie laat je toe om de rand voor alle vier de zijden in één keer in te stellen, bv. border: 1px solid black. Dit kan opgedeeld worden in verschillende eigenschappen indien de stijling specifieker moet zijn:
margin

De marge (margin) omringt een CSS doos en duwt tegen andere CSS dozen in de layout.  Ze gedraagt zich zoals padding; de korte notatie is margin en de individuele eigenschappen zijn margin-top, margin-right, margin-bottom, en margin-left.

Opmerking: Marges hebben een specifieke eigenschap die we overlappende marges (margin collapsing) noemen: wanneer twee dozen tegen elkaar aanduwen, zal de afstand tussen hen de waarde zijn van de grootste van de twee marges en niet de som ervan.

Actief leren: spelen met dozen

Laat ons nu enkele oefeningen maken om de eigenschappen van het doosmodel, zoals hierboven besproken, te illustreren.  Je kan deze oefeningen uitproberen in de live editor hieronder, maar het kan gemakkelijker zijn om een kopie van de HTML en CSS bestanden lokaal op te slaan en in een nieuw browserwindow / tab te bekijken.  Je kan de voorbeeldcode vinden op Github.

Als je een fout maakt, kan je altijd opnieuw beginnen met behulp van de Reset knop.  Als je echt vast zit, druk dan op de Show solution knop om een potentieel antwoord te zien.0

In het aanpasbaar voorbeeld hierond, hebben we een set van drie dozen, die allemaal tekstinhoud bevatten en die gestijld zijn om de volledige breedte van de body op te nemen.  Deze zijn de <header>, <main>, en <footer> elementen in de HTML.  We willen dat je je concentreert op de drie onderste CSS regels — degene die elke doos individueel selecteren — en dat je het volgende probeert:

  • Kijk naar het doosmodel van elk individueel element op de pagina door de browser developer tools te openen en te klikken op de elementen in de DOM-inspecteur (meer informatie op Ontdek browser developper tools). Elke browser heeft een doosmodel-verkenner die de exacte waarden toont voor de marge, rand en vulling van een doos, samen met de grootte van de inhouddoos en de totale ingenomen ruimte van een element.
  • Stel een 20px margin-bottom in voor het <main> element. Stel nu 15px margin-top in op het <footer> element. Bemerk hoe de tweede actie geen verschil maakt in de layout — dit is een live voorbeeld van overlappende marges in actie: de kleinere marge's effectieve breedte is gereduceerd tot 0 en enkel de grotere marge blijft actief.
  • Stel een margin van 30px en een padding van 30px in voor elke zijde van het <main> element — bemerk hoe de ruimte rond het element (de marge) en de afstand tussen de rand en de inhoud (de vulling) allebei verhogen, waardoor de feitelijke inhoud een kleinere hoeveelheid ruimte inneemt.  Controleer dit met de browser developper tools.
  • Stel een grotere rand in langs alle zijden van het <main> element, van 40px, en merk op hoe dit ruimte wegneemt van de inhoud en niet van de marge of vulling.  Je kan dit doen door een volledig nieuwe set van waarden in te stellen voor de breedte, stijl en kleur via de border eigenschap, bv. 60px dashed red, maar aangezien de eigenschappen al ingesteld zijn in een vorige regel kan je ook gewoon een nieuwe border-width instellen.
  • Standaard wordt de width van de inhoud gezet op 100% van de beschikbare ruimte (nadat de marge, rand en vulling hun deel hebben gekregen) — als je de breedte van het browservenster veranderd, dan zullen de dozen groeien of krimpen om binnen het venter te blijven.  De height (hoogte) van de inhouddoos zal standaard neerkomen op de hoogte van de inhoud die in de doos zit.
  • Probeer een nieuwe breedte en hoogte in te stellen op het <main> element — begin met 400px breedte en 200px hoogte — en bekijk het resultaat. Je zal opmerken dat de breedte niet meer veranderd als je het browservenster van breedte veranderd.
  • Probeer een percentage van 60% in te stellen voor de breedte van het <main> element en bekijk het resultaat.  Je zou moeten zien dat de breedte nu wel veranderd als je de breedte van het browservenster aanpast.  Verwijder de height (hoogte) voor de <main> voorlopig.
  • Probeer de vulling en marge van het <main> elementin te stellen op 5% aan alle zijden, en bekijk het resultaat.  Als je via de browser developertools kijkt naar de breedte van het browservenster en dat vergelijkt met de breedte van de marge/vulling, zal je zien dat die 5% "5% van de breedte van het omvattende element" betekent.  Dus, als de grootte van het browservenster verhoogt, zullen ook alle marges en vullingen verhogen.
  • Marges kunnen negatieve waarden toegewezen krijgen, die kunnen gebruikt worden om elementdozen te doen overlappen.  Probeer volgende eigenschap in te stellen op het <main> element om het effect te zien: margin-top: -50px;
  • Blijf experimenteren!

Enkele tips en ideeën:

  • Standaard reikt de background-color/background-image tot aan de grens van de rand. Dit gedrag kan veranderd worden met behulp van de background-clip eigenschap, waar je meer over leert in de Background_clip sectie.
  • Als de inhouddoos groter wordt dan het browservenster, zal het overlopen uit het venster en zullen er scroll bars verschijnen die toelaten om het venster te scrollen zodat de rest van de doos zichtbaar wordt.  Je kan de overloop controleren met behulp van de overflow eigenschap — meer informatie in de Overflow sectie hieronder.
  • Dooshoogtes kunnen niet ingesteld worden met een percentage: de dooshoogte is altijd de hoogte van de inhoud, tenzij een absolute waarde ingesteld wordt (bv. in pixels of ems.) Dit is handiger dan een defautwaarde van 100% van de viewport hoogte voor elke doos.
  • Ook randen kunnen niet op een percentage ingesteld worden.
  • Je hebt misschien gemrkt dat de totale breedte van een doos de som is van haar width, padding-right, padding-left, border-right, en border-left eigenschappen.  In sommige gevallen is dat vervelend (bv. wat als je een doos wil met een totale breedte van 50%, met de rand en vulling ingesteld op een aantal pixels).  Om zulke problemen te voorkomen kan je het doosmodel aanpassen met behulp van de box-sizing eigenschap. Met de waarde border-box, verandert het doosmodel naar dit:

Geavanceerde doos-manipulatie

Naast het instellen van de breedte, hoogte, rand, vulling en marge van dozen zijn er nog een aantal andere eigenschappen beschikbaar om te veranderen hoe een doos zich gedraagt.  Deze sectie overloopt die andere eigenschappen.

Overloop

Als je de grootte van een doos instelt met absolute waarden (bv. x aantal pixels voor breedte / hoogte), kan het voorvallen dat de inhoud niet binnen de toegestane grootte past.  We kunnen de overflow eigenschap gebruiken om te bepalen wat er gebeurt in zo'n gevallen.  Er zijn verschillende mogelijke waarden, maar de meest gebruikte zijn:

  • auto: Als er teveel inhoud is, dan zal de overloop verborgen worden en worden er scroll bars getoont die de gebruiker toelaten om de verborgen inhoud te zien.
  • hidden: Als er teveel inhoud is dan wordt de overloop verborgen.
  • visible: Als er teveel inhoud is, dan wordt de overloop getoont buiten de doos (dis is het standaardgedrag in de meeste gevallen).

Hier is een eenvoudig voorbeeld om te tonen hoe deze instellingen werken:

Eerst wat HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

En nu wat CSS:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

De bovenstaande code geeft volgend resultaat:

Achtergrond klem (background clip)

De achtergrond van een doos bestaat uit kleuren en afbeeldingen, die boven elkaar worden gestapeld met behulp van (background-color, background-image.) Ze worden toegepast op een doos en weergegeven onder die doos.  Standaard zal de achtergrond tot aan de buitengrens van een doos reiken.  In de meeste gevallen is dit voldoende, maar in sommige gevallen kan het ontoereikend zijn (wat indien je een een achtergrondafbeelding hebt die maar tot aan de rand van de inhoud mag komen).  Dit gedrag kan aangepast worden door de background-clip eigenschap in te stellen op de doos.

Laten we eens kijken naar een voorbeeld, om te zien hoe dit werkt.  Eerst onze HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

Nu de CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

De bovenstaande code produceert volgend resultaat:

Schets (outline)

De outline van een doos is iets dat er uit ziet als een rand, maar dat geen onderdeel is van het doosmodel.  Het gedraagt zich als een rand die getekent wordt op de doos zonder de grootte van de doos te veranderen (meer specifiek wordt de schets getekent buiten de rand binnen de ruimte van de marge).

Opmerking: Let op wanneer je de schets-eigenschap gebruikt.  Het wordt in sommige gevallen gebruikt vanuit toegankelijkheidsoverwegingen om de actieve delen van een webpagina te markeren wanneer een gebruiker erop klikt.  Als je de schets gebruikt moet je er voor zorgen dat dit er niet uitziet zoals gemarkeerde links, want dit zou gebruikers kunnen verwarren.

Soorten CSS dozen

Alles wat we tot nu toe gezien hebben is van toepassing op dozen die blok-niveau elementen vertegenwoordigen.  Maar CSS heeft ook andere soorten dozen die zich anders gedragen.  Het soort doos dat van toepassing is voor een element wordt bepaalt door de display eigenschap.  Er zijn verschillende waarden beschikbaar voor display, maar in dit artikel willen we ons beperken tot de drie meest voorkomende: block, inline, en inline-block.

  • Een block doos wordt gedefinieerd als een doos die gestapeld wordt bovenop andere dozen (maw. elementen voor en na zo'n doos zal op een andere lijn staan), en die een breedte en hoogte kan hebben.  Het volledige doosmodel zoals hierboven beschreven is van toepassing op blok-dozen.
  • Een inline doos is het tegenovergestelde van een blokdoos: het vloeit mee met de tekst van een document (en zal dus verschijnen op dezelfde lijn als de omringende tekst en andere inline elementen, en de inhoud ervan zal dus ook gebroken worden met de stroom van de tekst, zoals lijnen in een paragraaf).  Breedte en hoogte instellen lukt niet voor inline dozen: elke vulling, marge en rand die ingesteld wordt op een inline doos zal de positie van de omringende tekst veranderen, maar zal geen invloed hebben op de positie van de omringende blok-dozen.
  • Een inline-block doos is iets tussen de twee eerste: het vloeit mee met de omringende tekst, maar de breedte en hoogte kan ingesteld worden omdat het zijn blok-integriteit behoudt net zoals een block doos — het zal niet opgebroken worden langs paragraaf-lijnen (in het voorbeeld hieronder zal de inline-block doos op de tweede lijn tekst gaan, aangezien er niet genoeg plaats is op de eerste lijn en het niet kan verdeeld worden over twee lijnen).

Opmerking: Standaard hebben blok-niveau elementen display: block;en inline elementen display: inline;.

Dit kan verwarrend klinken, dus laat ons kijken naar een eenvoudig voorbeeld.

Eerst, de HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

Dan de CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

De bovenstaande code geeft het onderstaande resultaat, welks de verschillende display-soorten illustreert:

Verdere literatuur

Hier gekomen, zou je al wat vertrouwd moeten zijn met CSS dozen en hoe ze werken.  Geen zorgen als je nog niet alles volledig begrijpt, je kan dit artikel altijd herlezen en je zal alles beter verstaan eens we enkele praktische voorbeelden uitwerken later in de cursus.  Hierna kijken we naar CSS Debuggen.

Zie ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,