Grootte van CSS- boxen
Grootte van CSS-box
Met de CSS box-sizing-eigenschap kunnen we de opvulling en rand opnemen in de totale breedte en hoogte van een element.
Zonder de CSS box-sizing Property
Standaard wordt de breedte en hoogte van een element als volgt berekend:
breedte + opvulling + rand = werkelijke breedte van een element
hoogte + opvulling + rand = werkelijke hoogte van een element
Dit betekent: Wanneer je de breedte/hoogte van een element instelt, lijkt het element vaak groter dan je hebt ingesteld (omdat de rand en opvulling van het element worden toegevoegd aan de opgegeven breedte/hoogte van het element).
De volgende afbeelding toont twee <div>-elementen met dezelfde opgegeven breedte en hoogte:
De twee <div> elementen hierboven eindigen met verschillende groottes in het resultaat (omdat div2 een opvulling heeft gespecificeerd):
Voorbeeld
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
De box-sizingaccommodatie lost dit probleem op.
Met de CSS box-sizing Property
Met de box-sizingeigenschap kunnen we de opvulling en rand opnemen in de totale breedte en hoogte van een element.
Als u box-sizing: border-box;een element instelt, worden opvulling en rand opgenomen in de breedte en hoogte:
Hier is hetzelfde voorbeeld als hierboven, met box-sizing: border-box;
toegevoegd aan beide <div> elementen:
Voorbeeld
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Omdat het resultaat van het gebruik van de box-sizing: border-box;zo veel beter is, willen veel ontwikkelaars dat alle elementen op hun pagina's op deze manier werken.
De onderstaande code zorgt ervoor dat alle elementen op deze meer intuïtieve manier worden gedimensioneerd. Veel browsers gebruiken al box-sizing: border-box;voor veel formulierelementen (maar niet alle - daarom zien invoer en tekstgebieden er in de breedte anders uit: 100%;).
Dit toepassen op alle elementen is veilig en verstandig:
Voorbeeld
* {
box-sizing: border-box;
}
Eigenschap CSS-vakgrootte
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |