Et kig på CSS3 Box-dimensionering

Denne artikel er en del af vores "HTML5 / CSS3 Tutorials serie" - dedikeret til at gøre dig til en bedre designer og / eller udvikler. Klik her at se flere artikler fra samme serie.

Ikke så længe siden, når vi opretter en boks på en webside, lad os sige med en div, vi specificerer 100px for både bredden og højden efterfulgt af polstring til 10px og grænser omkring 10px såvel.

 div bredde: 100px; højde: 100px; polstring: 10px; grænse: 10px solid #eaeaea;

Browserne vil udvide boksens størrelse til 140px, hvor denne mængde 140px af den samlede bredde / højde består af tilsætningen af polstring og grænser som følger; 100px [bredde / højde] + (2 x 10px [polstring]) + (2 x 10px [grænse]).

Men nogle gange er dette resultat ikke, hvad vi forventer at være. Nogle gange behøver vi boksen til altid at være 100px uanset polstring eller grænser.

For at overvinde et sådant tilbagevendende problem, når du opretter websiderlayout, kan vi bruge CSS3 box-dimensionering ejendom til at kontrollere, hvordan CSS boks model skal arbejde i browseren.

Brug af boks størrelse

Det box-dimensionering Ejendommen har to værdimuligheder, først den indhold-box; som er standardværdien, når du bruger denne værdi, vil bokmodellen opføre sig som beskrevet ovenfor.

Og den anden er border-box, hvor boksens størrelse beregnes ved at trække det specificerede indholds størrelse op med polstring og grænser tilføjet.

 div bredde: 100px; højde: 100px; polstring: 10px; grænse: 10px solid #eaeaea; box-dimensionering: border-box; -moz-box-dimensionering: border-box; / * Firefox 1-3 * / -webkit-box-dimensionering: grænse-boks; / * Safari * /

Når vi f.eks. Har en kasse som det vi har beskrevet ovenfor (100 px kvadrat med 10 pixels til polstring og grænserne), vil indholdets størrelse falde til 60px, og den samlede størrelse af kassen forbliver 100px, hvor ligningen af subtraktionen kan beskrives som følger; 100px [bredde / højde] - ((2 x 10px [polstring]) + (2 x 10px [grænse])).

Demo
Download kilde

Browser Support

Det box-dimensionering ejendommen er understøttes i alle browsere; Firefox 3.6+, Safari 3, Opera 8.5+ og Internet Explorer 8 og nyere.

Så hvis du ved, at de fleste af dine besøgende ikke bruger Internet Explorer-versioner under 8, kan du bruge denne nyttige anbefaling (takket være Paul Irish).

 * box-dimensionering: border-box; -moz-box-dimensionering: border-box; / * Firefox 1-3 * / -webkit-box-dimensionering: grænse-boks; / * Safari * /

Udsnittet ovenfor gælder for box-dimensionering ejendom til alle elementerne på din webside.

Eksempel

I dette afsnit vil vi vise dig et virkeligt eksempel på, hvordan vi kan gøre brug af dette box-dimensionering ejendom. Vi vil oprette en simpel navigation, baseret på HTML-markeringen nedenfor, med fem link-menuer i den.

  Menu 1
 Menu 2
 Menu 3
 Menu 4
 Menu 5

Derefter vil vi tilføje nogle dekorative stilarter; f.eks. indstil navigationen fix bredde til 500px og linkets bredde til 100px hver, Indsæt derefter listefunktionen og giv forskellige baggrunde for hver linkmenu, så du kan se forskellen mellem dem.

 nav bredde: 500px; margin: 50px auto 0; højde: 50px;  nav ul polstring: 0; margen: 0;  nav li float: left;  nav a display: inline-block; bredde: 100px; højde: 100%; baggrundsfarve: #ccc; farve: # 555; tekst dekoration: ingen; skrifttype-familie: Arial, sans-serif; skrifttypestørrelse: 12pt; linjehøjde: 300%; tekst-align: center;  nav a display: inline-block; bredde: 100px; højde: 100%; farve: # 555; tekst dekoration: ingen; skrifttype-familie: Arial, sans-serif;  nav li: nth-child (1) a baggrundsfarve: # E9E9E9; grænse-venstre: 0;  nav li: nth-child (2) a baggrundsfarve: # E4E4E4;  nav li: nth-child (3) a baggrundsfarve: #DFDFDF;  nav li: nth-child (4) a baggrundsfarve: # D9D9D9;  nav li: nth-child (5) a baggrundsfarve: # D4D4D4; grænsen til højre: 0;

På dette tidspunkt ser vores navigation bare normalt ud.

Problemet kommer imidlertid, når vi tilføjer venstre eller højre grænse til linkmenuen.

 nav a border-left: 1px solid #aaa; grænse-højre: 1px solid # f3f3f3;

Menuen overlader til bunden, da linkets bredde ikke længere er 100px. Det er nu 102px, hvilket forårsager, at navigationens samlede bredde er 10px længere tid end vi har angivet ovenfor (500px).

For at overvinde dette problem skal vi anvende box-dimensionering ejendom, som følger:

 nav a border-left: 1px solid #aaa; grænse-højre: 1px solid # f3f3f3; box-dimensionering: border-box; -moz-box-dimensionering: border-box; -webkit-box-dimensionering: grænse-boks;

Demo
Download kilde

Yderligere læsning

Og endelig, hvis du er den eventyrlystne type og ønsker at grave dybere ind i dette emne, har vi samlet nogle få udvalgte referencer til dig:

Forstå CSS Box Model - Tech Republic
Boksstørrelsesfejl i Firefox - BugZilla
Box-dimensionering FTW - Paul Irish