Percentages in CSS worden gebruikt om flexibele maten en ruimtes te definiëren. Dit kan handig zijn bij het maken van responsieve webpagina’s die zich aanpassen aan verschillende schermgroottes.
1. Breedte en Hoogte:
Stel, je wilt dat een div 50% van de breedte van zijn ouder neemt, dan kun je dat als volgt doen:
```
div {
width: 50%;
}
```
Op dezelfde manier kun je de hoogte instellen met een percentage, hoewel dit minder vaak voorkomt, omdat de hoogte vaak wordt bepaald door de inhoud van het element.
1. Padding en Margin:
Je kunt ook procentuele waarden gebruiken om padding en marges in te stellen. Dit is gebaseerd op de breedte van het element, niet de hoogte.
```
div {
margin: 10%;
padding: 5%;
}
```
1. Font grootte:
Voor font groottes worden percentages het meest gebruikt om relatieve maten in te stellen op basis van de standaardlettergrootte van het browser of de lettergrootte van het overkoepelende element.
```
p {
font-size: 150%;
}
```
In het bovenstaande geval zal de paragraaf 50% groter zijn dan de standaardlettergrootte.
Let op, als elementen worden genesteld, zijn de percentages relatief aan het ouder element. Als een div bijvoorbeeld in een andere div is genesteld en beide hebben hun breedte ingesteld als een percentage, wordt het geneste div gebaseerd op de breedte van het buitenste div, niet de volledige paginabreedte.
Probeer te experimenteren met percentages en zie hoe het werkt op verschillende schermgroottes, het kan je helpen bij het maken van flexibelere en responsievere ontwerpen.
