En titt på CSS3-boks-dimensjonering

Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å se flere artikler fra samme serie.

Ikke så lenge siden, når vi lager en eske på en nettside, la oss si med en div, vi spesifiserer 100px for både bredde og høyde, etterfulgt av padding til 10px og grenser rundt 10px også.

 div bredde: 100px; høyde: 100px; polstring: 10px; border: 10px solid #eaeaea;

Nettleserne vil utvide boksens størrelse til 140px, hvor denne mengden 140px av total bredde / høyde består av tillegg av padding og grenser som følger; 100px [bredde / høyde] + (2 x 10px [polstring]) + (2 x 10px [grense]).

Men noen ganger er dette resultatet ikke det vi forventer å være. Noen ganger trenger vi boksen for alltid å være 100px uansett polstring eller grensene lagt til.

For å overvinne et slikt tilbakevendende problem når du oppretter websidelayout, kan vi bruke CSS3 box-sizing eiendom for å kontrollere hvordan CSS boks modell skal fungere i nettleserne.

Bruke boks størrelse

De box-sizing Eiendommen har to verdialternativer, først den Innholdet-box; som er standardverdien, når du bruker denne verdien, vil bokmodellen oppføre oss som beskrevet ovenfor.

Og den andre er border-box, hvor boksens størrelse vil bli beregnet ved å trekke ut det angitte innholdets størrelse med polstring og grenser lagt til.

 div bredde: 100px; høyde: 100px; polstring: 10px; border: 10px solid #eaeaea; boks-størrelse: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-boks-størrelse: border-box; / * Safari * /

For eksempel, når vi har en boks som det vi har beskrevet ovenfor (100px kvadrat med 10 piksler for polstring og grenser), vil innholdets størrelse reduseres til 60px, og den totale størrelsen på boksen forblir 100px, hvor ligningen av subtraksjonen kan beskrives som følger; 100px [bredde / høyde] - ((2 x 10px [polstring]) + (2 x 10px [grense])).

Demo
Last ned kilde

Nettleserstøtte

De box-sizing eiendommen er støttes i alle nettlesere; Firefox 3.6+, Safari 3, Opera 8.5+ og Internet Explorer 8 og nyere.

Så hvis du vet at de fleste av dine besøkende ikke vil bruke Internet Explorer-versjoner under 8, kan du bruke denne nyttige anbefalingen (takket være Paul Irish).

 * box-size: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-boks-størrelse: border-box; / * Safari * /

Utsnittet ovenfor vil gjelde box-sizing eiendom til alle elementene på websiden din.

Eksempel

I dette avsnittet vil vi vise deg et virkelige eksempel på hvordan vi kan gjøre bruk av dette box-sizing eiendom. Vi vil opprette en enkel navigering, basert på HTML-oppslaget nedenfor, med fem koblingsmenyer i den.

  Meny 1
 Meny 2
 Meny 3
 Meny 4
 Meny 5

Da vil vi legge til noen dekorative stiler; for eksempel angi navigasjonens fikse bredden for 500px og lenken er bredde for 100px hver, Deretter legger du inn listeposten, og gir forskjellig bakgrunn for hver lenkemeny, slik at du kan se forskjellen mellom dem.

 nav bredde: 500px; margin: 50px auto 0; høyde: 50px;  nav ul polstring: 0; margin: 0;  nav li float: left;  nav a display: inline-block; bredde: 100px; høyde: 100%; bakgrunnsfarge: #ccc; farge: # 555; tekst-dekorasjon: ingen; font-familie: Arial, sans-serif; skriftstørrelse: 12pt; linjehøyde: 300%; tekstjustering: center;  nav a display: inline-block; bredde: 100px; høyde: 100%; farge: # 555; tekst-dekorasjon: ingen; font-familie: Arial, sans-serif;  nav li: nth-child (1) a bakgrunnsfarge: # E9E9E9; border-left: 0;  nav li: nth-child (2) a bakgrunnsfarge: # E4E4E4;  nav li: nth-child (3) a bakgrunnsfarge: #DFDFDF;  nav li: nth-child (4) a bakgrunnsfarge: # D9D9D9;  nav li: nth-child (5) a bakgrunnsfarge: # D4D4D4; grense høyre: 0;

På dette tidspunktet ser vår navigasjon bare ut som vanlig.

Problemet kommer imidlertid når vi legger til venstre eller høyre grenser til lenkemenyen.

 nav en border-left: 1px solid #aaa; grense-høyre: 1px solid # f3f3f3;

Menyen vil overfylle til bunnen, da lenkenes bredde ikke lenger er 100px. Det er nå 102px, forårsaker at navigasjonens totale bredde skal være 10px lenger enn vi har spesifisert ovenfor (500px).

For å overvinne dette problemet må vi søke på box-sizing eiendom, som følger:

 nav en border-left: 1px solid #aaa; grense-høyre: 1px solid # f3f3f3; boks-størrelse: border-box; -moz-box-size: border-box; -webkit-boks-dimensjonering: border-box;

Demo
Last ned kilde

Videre lesning

Og til slutt, hvis du er den eventyrlystne typen, og ønsker å grave dypere inn i dette emnet, har vi satt sammen noen utvalgte referanser for deg:

Forstå CSS Box Model - Tech Republic
Boksstørrelsesfeil i Firefox - BugZilla
Box-størrelse FTW - Paul Irish