Uitbreiding van elemente in CSS vir JavaScript
Die instelling van CSS eienskappe
width en
height
waarborg nie dat die element die
gespesifiseerde grootte sal hê nie. Kom ons kyk
na voorbeelde.
Voorbeeld
Tans stem die element se afmetings ooreen met die gespesifiseerde:
<div id="elem">
teks
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Voorbeeld
En laat ons nou die element die eienskap
padding toewys.
As gevolg hiervan sal die werklike breedte van die element
vermeerder en uitbrei met die gespesifiseerde waarde
van die binnekant:
<div id="elem">
teks
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Voorbeeld
Die teenwoordigheid van 'n rand brei die element ook uit:
<div id="elem">
teks
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Voorbeeld
Die eienskap box-sizing
laat die bogenoemde gedrag toe om verander te word.
Dit kan gedoen word sodat nóg die binnekant
nóg die rand die element uitbrei.
Om dit te doen, moet hierdie eienskap
die waarde border-box toegewys word:
<div id="elem">
teks
</div>
#elem {
box-sizing: border-box;
padding: 20px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Belangrikheid van bogenoemde
Vanuit 'n JavaScript-oogpunt is die beskryfde situasie
nie baie gerieflik nie. Dit blyk immers dat deur die waarde
van die eienskap width te lees, ons glad nie
seker kan wees dat die element presies
daardie breedte sal hê nie.
