Hoe moeilijk kan het nou zijn een paar kleurtje hier instellen, paar afbeeldinkjes daar. Helaas zo makkelijk is het niet, maar heel moeilijk is het ook niet als je maar begrijpt wat er in de achtergrond gebeurd. Zo is het heel belangrijk te begrijpen hoe de boundingbox werkt en hoe de html elementen worden geplaatst in de flow.
Alles binnen een HTML wordt direct of indirect op zijn plek geplaatst als een rechthoek. Deze rechthoeken hebben een aantal eigenschappen die kunnen worden mee gegeven:
border
padding
margin
width
height
Al deze eigenschappen bepalen hoe hoog en hoe breed deze in het totaal wordt, maar ook hoeveel ruimte deze van andere elementen af blijft. Neem een element met de border van 4 pixels een padding van 20 pixels en een width van 200 pixels. De totaal breedte van dit element zal dan 248 pixels zijn.
Alle elementen die niet door een een of andere instelling uit de flow stapt, vloeit volgens de regels op zijn plek doordat alle items ervoor al ruimte in neemt en het huidige element de beschikbare ruimte heeft.
Binnen een container, bij een leeg document de body, worden de elementen van links naar rechts geplaatst tot dat de regel vol is en dan wordt er naar de volgende regel gegaan. Zo loopt alles dus in horizontale lijnen van boven naar beneden.
Om het lekker verwarrend te maken zijn HTML-elementen niet de elementen waarmee je dingen plaats. Zo zijn de stukken tekst in de html bron ook elementen, maar kun je opmaak alleen mee geven via HTML-elementen. Hiervoor is er de display eigenschap, deze kent 2 belangrijke instellingen block en inline.
Display: block
HTML-elementen met deze waarde hebben een hoogte en breedte, en nemen een volledige regel in beslag. Daarnaast komt erbij dat deze ook direct een container zijn voor de elementen die er binnen in geplaatst worden.
Display: inline
HTML-elementen met de waarde inline, kennen zelf geen afmeting. Dus de waardes width en height worden daarom ook genegeerd. Wat deze doen is het doorgeven van opmaak aan de onderliggende elementen (tekst).
Nu is er ook nog een combinatie van deze 2 genaamd inline-block. Voorbeelden hiervan zijn img, input textarea enz. Deze kennen wel een hoogte en breedte, maar gaan net als tekst mee in de flow van de regel. Maar in tegenstelling tot tekst kunnen deze niet worden opgebroken in meerdere regels. Nu kun je elk element ook deze waarde mee geven met al zijn voor en nadelen. Dit kon vroeger niet, daarom is het dus ook lekker verwarrend dat HTML-elementen als img, input enz dus de waarde op inline hebben staan. Dit zou nu gecorrigeerd kunnen worden maar wordt niet gedaan.
Dit kan op 2 manieren, door een element floating te maken of door deze position absolute mee te geven.
Floating elementen zijn standaard container, beginnen op de regel waar die zou beginnen mocht deze wel deel uit maken in de flow. En zoals de meeste kennen lijnen deze volledig uit naar links en naar rechts. Omdat deze elementen geen deel uit maken van de flow, passen ze dus ook niet de regel aan waarop deze start. Om te zorgen dat de container element minimaal de hoogte krijgt tot voorbij dit floating element, is het een best practice om dit af te sluiten met een zogenaamde clear element. Dit is een block element met geen hoogte, maar wel met de eigenschap “clear: both” Dit betekend dat deze regel pas begint waar de laagste float eindigd.
Positioneren met position absolute, kan een hele handige uitkomst zijn. Hierdoor kan er op de pixel nauwkeurig worden bepaald waar het element geplaatst moet worden relatief tot het anker element. Een anker element is een element waarbij het eigenschap position niet op de standaard waarde staat. Zo kun je door gebruik te maken van de waarde relative een element die wordt geplaatst door de flow gebruiken als anker. Het goed onder de knie krijgen van deze manier van positioneren kan een hele handige tool zijn. Verder zou de voorkeur ook moeten zijn om hier gebruik van te maken indien mogelijk. De rendering ervan is merkbaar sneller, een logisch iets gezien er veel meer waardes vast staan en en dus minder berekeningen gedaan hoeft te worden om iets op zijn plaats te krijgen.
Hier enkele voorbeelden hoe het een en ander in werkt.
Uitlijnen met floats en de do en don't
Positioneren met position absolute
De valkuilen van de boundingbox