CSS Box Sizing

CSS Box Sizing

CSS box-sizing eigenschap staat ons toe om de binnenste marges (vulling) en randen van de totale breedte en hoogte van het element op te nemen.

Als de CSS box-sizing eigenschap niet is ingesteld

Standaard wordt de breedte en hoogte van een element op deze manier berekend：

  • width + padding + border = de daadwerkelijke breedte van het element
  • height + padding + border = de daadwerkelijke hoogte van het element

Dit betekent: wanneer je de breedte/hoogte van een element instelt, ziet het element meestal groter uit dan je hebt ingesteld (omdat de randen en binnenste marges van het element zijn toegevoegd aan de ingestelde breedte/hoogte van het element).

De volgende afbeelding toont twee <div>-elementen met dezelfde opgegeven breedte en hoogte：

Deze div is kleiner
（breedte is 300px, hoogte is 100px）。
Deze div is groter
（breedte is ook 300px, hoogte is 100px）。

De twee <div>-elementen in de uiteindelijke resultaten hebben verschillende afmetingen (omdat div2 de binnenste marges heeft opgegeven):

Voorbeeld

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Probeer het zelf

box-sizing eigenschap lost dit probleem op.

Als je de CSS box-sizing eigenschap gebruikt

box-sizing eigenschap is ingesteld die toestaat dat we de binnenste marges en randen van de totale breedte en hoogte van het element opnemen.

Als er een box-sizing: border-box;，dan worden de breedte en hoogte inclusief de binnenste marges en randen berekend：

Nu zijn beide div's van dezelfde grootte!
Hooray!

Dit voorbeeld is hetzelfde als het vorige, beide <div>-elementen hebben box-sizing: border-box;：

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;
}

Probeer het zelf

Omdat gebruik box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

Het volgende code kan ervoor zorgen dat alle elementen op deze manier worden aangepast. Veel browsers gebruiken al deze effect zo goed, dat veel ontwikkelaars hopen dat alle elementen op de pagina op deze manier kunnen werken. box-sizing: border-box;(maar niet allemaal - dit is de reden waarom input en textarea er anders uitzien bij width: 100%;).

Het toepassen ervan op alle elementen is veilig en wijs:

Voorbeeld

* {
  box-sizing: border-box;
}

Probeer het zelf

CSS Box Sizing Eigenschap

Eigenschap Beschrijving
box-sizing Definieer de berekening van de breedte en hoogte van de elementen: of ze de inbeslagname (padding) en randen moeten bevatten.