Stijl eigenschap boxSizing

Definitie en gebruik

boxSizing De eigenschap maakt het mogelijk om een specifiek element in een specifieke regio te definiëren.

Bijvoorbeeld, als u twee randen met frame naast elkaar wilt plaatsen, kunt u de box-sizing instellen op "border-box". Dit zorgt ervoor dat de browser een frame met de gespecificeerde breedte en hoogte weergeeft, waarbij de randen en de inbeslagneming in het frame worden geplaatst.

Zie ook:

CSS Referentiemanualbox-sizing eigenschap

Voorbeeld

Veranderen van de boxSizing-eigenschap:

document.getElementById("myDIV").style.boxSizing = "border-box";

Probeer het zelf uit

Syntaxis

Terugkeergewaarde van de boxSizing-eigenschap:

object.style.boxSizing

Instellen van de boxSizing-eigenschap:

object.style.boxSizing = "content-box|border-box|initial|inherit"

Eigenschapswaarde

Waarde Beschrijving
content-box

Standaardwaarde. Dit is het gedrag van breedte en hoogte zoals gedefinieerd in CSS2.1.

De ingestelde breedte en hoogte (en de min/max eigenschappen) worden toegepast op de breedte en hoogte van het inhoudsvak van het element.

De binnenste rand en inbeslagneming van het element worden buiten de ingestelde breedte en hoogte geplaatst en getekend.
border-box

De breedte en hoogte van het element bepalen het randvak van het element.

Dit betekent dat elke binnenste rand en inbeslagneming van het element binnen de ingestelde breedte en hoogte worden getekend.

De breedte en hoogte van de inhoud kunnen worden verkregen door het van de ingestelde breedte en hoogte af te trekken van de rand en de inbeslagneming.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overneemt de waarde van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde: content-box
terugkeergewaarde een string die de box-sizing eigenschap.
CSS Version: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support