Hvordan CSS-boksstørrelsesegenskaben styrer størrelsen på elementerne

CSS boksstørrelsesegenskab bruges til at justere eller kontrollere størrelsen på ethvert element, der accepterer et widtheller height. Det specificerer, hvordan man beregner det samlede widthog heightaf dette element.

I denne artikel vil jeg forklare, hvordan CSS- box-sizingegenskaben kan bruges til at kontrollere størrelsen på elementer.

Forudsætninger

• Grundlæggende CSS-viden.
• Kode editor.
• Webbrowser.

Uden egenskaben CSS-størrelse

Hvis du ser på kodestykket nedenfor, vil du bemærke, at der er to divelementer med det samme widthog height- men det første divser ud til at være større end det andet div.

Det er ret mærkeligt, ikke? For hvorfor skulle nogen tildele samme bredde og højde til to divelementer, medmindre de ideelt set ønskede, at disse elementer skulle være de samme?

Fortsæt med at læse for at finde ud af, hvorfor de to divelementer er forskellige ?? ‍ ??? ‍ ?.

Som standard beregner CSS-boksmodellen ethvert element, der accepterer en bredde eller højde i dette format:

• bredde + polstring + kant = gengivet eller vist bredde på elementets boks.
• højde + polstring + kant = gengivet eller vist højde på elementets boks.

Dette betyder, at når du tilføjer paddingeller bordertil elementet, vil størrelsen på et element virke større end den størrelse, der oprindeligt blev tildelt det. Dette skyldes, at indholdet af dette element indeholder widthog heightegenskaber, men omfatter ikke paddingeller borderejendom.

Forstår du det stadig ikke endnu? Se på kodestykket nedenfor for at se den faktiske beregning.

.first-box { width: 200px; height: 100px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */ } .second-box { width: 200px; height: 100px; border: 8px solid blue; background: yellow; /* Total width: 200px + (2 * 8px) = 216px Total height: 100px + (2 * 8px) = 116px */ } 

Som det ses i kodestykket, tilføjer CSS paddingog bordertil det widthog heightallerede specificerede. Det viser den samlede værdi som elementets størrelse og ignorerer derved den faktiske størrelse, du har tildelt div.

Med CSS boksstørrelses egenskab

Med box-sizingejendommen kan standardadfærden, der er forklaret ovenfor, ændres.  

Brug den samme kode, lad os tilføje box-sizingejendommen og indstille den til border-boxog se, om vi faktisk kan kontrollere størrelsen.

Du må have bemærket, at de to divelementer nu har samme størrelse.

Syntaks

box-sizing:content-box; box-sizing:border-box; 

indhold-boks

Dette er standardopførelsen for egenskaben for boksstørrelse. content-boxtager ikke hensyn til widthog heightangivet for et element.

Det vil sige, at hvis du indstiller et element widthtil 200 pixels , skal du indstille rammen til 8 pixels og polstringen til 20 pixels , størrelsen på borderog paddingføjes til den endelige gengivne bredde. Dette gør elementet bredere end 200 pixels .

div{ box-sizing:content-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/ } 

Som det ses i kodestykket ovenfor, er størrelsen på dette divelement automatisk steget til 256 pixel, selv når det oprindeligt var indstillet til 200 pixel.

border-box

Når du indstiller box-sizingejendommen til border-box, fortæller den browseren at tage højde for enhver borderog paddingtildeles elementets bredde og højde.

Det vil sige, hvis du indstiller et element widthtil 200 pixels , vil de 200 pixels indeholde enhver kant eller polstring, du tilføjer, og indholdsboksen krymper for at absorbere den ekstra bredde.

div{ box-sizing:border-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/ } 

Som det ses i kodestykket ovenfor, er størrelsen på dette divelement automatisk reduceret til 144 px, selv når det oprindeligt var indstillet til 200 pixels.

Lad os flette begge kodestykker og se nøjagtigt, hvordan feltet ser ud med content-boxog border-box.

Konklusion

Med CSS-boksstørrelsesegenskaben har du muligheden for at indstille, hvordan størrelsen på elementerne i din kode beregnes.

Ifølge MDN er det ofte nyttigt at indstille box-sizingtil, border-boxnår du lægger elementer. Dette gør det meget lettere at håndtere elementernes størrelser og eliminerer generelt en række faldgruber, du kan snuble på, mens du lægger dit indhold ud.  

På den anden side, når du bruger position: relativeeller position: absolute, bruger box-sizing: content-boxdet, at placeringsværdierne er relative til indholdet og uafhængige af ændringer i kant- og polstringsstørrelser. Nogle gange vil du måske have dette.

Det var alt folkens! Jeg håber, det var nyttigt. I så fald del denne artikel og følg mig på Twitter.