Wat is de box

uit de cursus Basiskennis Layout van webpagina's

Wat is de box
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis Layout van webpagina's

perm_identity Belinda | video_library 40 video's | query_builder 03:09:42

Het maken van de  layout van een webpagina. Leer in deze online training met behulp van HTML en CSS om pagina’s exact zo vorm te geven zoals je wilt. Hiervoor maak je gebruik van het zogeheten boxmodel. Met CSS kun je de vormgeving en de plaatsing van teksten, afbeeldingen en overige media exact bepalen. Zowel statisch als responsive.

De box en het layouten van webpagina’s

Dankzij het zogeheten boxmodel ben je staat om tekst, afbeeldingen en overige media exact te positioneren en vorm te geven zoals je dat wilt. Hiermee bepaal je de layout van de webpagina. Je leert de boxeigenschappen op de juiste manier in te zetten en te benutten. Elke webpagina wordt opgebouwd uit speciaal hiervoor in het leven geroepen html5-elementen (header, nav, aside, footer en div). In dit hoofdstuk leer je alle mogelijke vormen van layout te creëren.

Positioneren van elementen

Soms moeten elementen zich natuurlijk gedragen in de ‘flow’, maar soms wil je de positie en het gedrag van elementen exact kunnen bepalen. CSS biedt hiervoor specifieke position-stijlopdrachten. Leer hoe je een webpagina-layout maakt in flexibele kolommen maar ook hoe je kaders op vaste posities kunt zetten.

In deze video behandel ik het zogeheten boxmodel.

Ieder html element wordt gezien als een box, een rechthoekig vlak.

Je kunt deze vlakken positioneren door ze naast elkaar of onder elkaar,

ook in elkaar, dat noemen ze 'genested' en zelfs over elkaar heen te plaatsen.

Grofweg kun je de html elementen verdelen in block-elementen of inline-elementen.

Het karakteristieke kenmerk van een inline-element is dat deze nasst elkaar op dezelfde regel kunnen staan

Zoals je bijvoorbeeld teksten kunt benadrukken door het html element 'em' te gebruiken voor 'emphasis'.

Of bijvoorbeeld zoals je meerdere afbeeldingen naast elkaar kunt plaatsen.

Het karakteristieke van een block-element is dat deze standaard geen andere elementen naast zich verdraagt.

Ze nemen altijd de hele regel in beslag.

En dit is bijvoorbeeld het geval als je teksten gaat structureren met de 'h' en de 'h'.

Maar ook bijvoorbeeld een paragraaf. Dus elk element is een box.

Elke box kun je voorzien van de volgende css-eigenschappen.

Margin, border, padding en content. Met content bedoelen we de inhoud van de box. Dus bijvoorbeeld de inhoud van een 'h'.

Als je afstand wilt creëren tussen de begrenzing van de box en de inhoud, dan gebruik je daarvoor 'padding'.

En deze kan langs alle zijden worden toegepast met behulp van 'padding-top, padding-right, padding-bottom en padding-left'.

De begrenzing van de box kun je voorzien met een 'border'. En ook deze kun je langs alle zijden apart definiëren.

Vervolgens kun je nog extra afstand opgeven vanaf de begrenzing van de box,

Naar het naast gelegen element en dat doe je dan vervolgens met 'margin'

Een verschil tussen de 'margin' en de 'padding' is dat als je een box een vulkleur geeft.

Deze vulkleur wel zichtbaar is in de 'padding' maar niet in de 'margin'.

Want de vulkleur loopt tot aan de begrenzing van de box.

En vanaf de border volgt alleen maar transparante ruimte waarmee je afstand kunt creëren.

Uiteindelijk is het wel de optelsom die bepaalt wat de fysieke ruimte is dat een element op de pagina inneemt.

Dus werk je met absolute maten, dan zul je dus de opgegeven afstanden van 'margin, padding, de border',

en eventueel een breedte die je aan de inhoud hebt gegeven bij elkaar op moeten tellen.

En zodoende weet je wat de absolute maat is die het element inneemt.