Width is de breedte van een element en height is de hoogte van een element.
Soms kun je ook de min-height instellen, dat is de minimale hoogte van een element. De max-height is de maximale hoogte. Uiteraard is min-width dan de minimale breedte, en max-width de maximale breedte.
Je kunt namelijk een vaste hoogte en/of breedte instellen, maar dat hoeft niet perse. Als je niets instelt wordt de benodigde hoogte of breedte automatisch berekend door de browser. Als je geen vaste hoogte en/of breedte instelt kun je met min en max alsnog bepaalde grenzen aangeven.
Als er een vaste breedte of hoogte wordt gebruikt werd deze meestal weergegeven in pixel (px), maar in het kader van responsive design wordt er zeker voor de breedte tegenwoordig vaak gekozen voor een percentage (%). Zo kun je een element 100% breed maken, maar je kunt bijvoorbeeld ook 4 kolommen van elk 25% breed gebruiken.
Viewport Width (vw) en Viewport Height (vh)
Daarnaast worden ook Viewport Width (vw) en Viewport Height (vh) regelmatig gebruikt. De viewport is het gedeelte van de pagina dat op dat moment in beeld is op het scherm. De vh en vw worden uitgedrukt in een percentage van de schermhoogte of schermbreedte. Als een element dus een height heeft van 100vh bedekt dat element het hele scherm in de hoogte, en als het 50vw is bedekt het 50% van de schermbreedte.
0 reacties