CSS -boksgrootte
CSS-boksgrootte
Die CSS box-sizing-eienskap stel ons in staat om die opvulling en rand in 'n element se totale breedte en hoogte in te sluit.
Sonder die CSS-boksgrootte Eiendom
By verstek word die breedte en hoogte van 'n element soos volg bereken:
breedte + opvulling + rand = werklike breedte van 'n element
hoogte + opvulling + rand = werklike hoogte van 'n element
Dit beteken: Wanneer jy die breedte/hoogte van 'n element stel, lyk die element dikwels groter as wat jy gestel het (omdat die element se rand en opvulling by die element se gespesifiseerde breedte/hoogte gevoeg word).
Die volgende illustrasie toon twee <div>-elemente met dieselfde gespesifiseerde breedte en hoogte:
Die twee <div>-elemente hierbo eindig met verskillende groottes in die resultaat (omdat div2 'n opvulling gespesifiseer het):
Voorbeeld
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Die box-sizingeiendom los hierdie probleem op.
Met die CSS-boksgrootte Eiendom
Die box-sizingeiendom stel ons in staat om die vulling en rand in 'n element se totale breedte en hoogte in te sluit.
As jy box-sizing: border-box;op 'n element instel, is vulling en rand by die breedte en hoogte ingesluit:
Hier is dieselfde voorbeeld as hierbo, met box-sizing: border-box;
bygevoeg by beide <div> elemente:
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;
}
Aangesien die resultaat van die gebruik van die box-sizing: border-box;soveel beter is, wil baie ontwikkelaars hê dat alle elemente op hul bladsye op hierdie manier moet werk.
Die kode hieronder verseker dat alle elemente op hierdie meer intuïtiewe manier grootte is. Baie blaaiers gebruik reeds box-sizing: border-box;vir baie vormelemente (maar nie almal nie - daarom lyk invoere en teksareas anders in breedte: 100%;).
Dit is veilig en verstandig om dit op alle elemente toe te pas:
Voorbeeld
* {
box-sizing: border-box;
}
CSS Box Sizing Eiendom
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |