En titt på CSS3 Box-dimensionering
Inte så länge sedan, när vi skapar en låda på en webbsida, låt oss säga med en div, vi specificerar 100px för både bredden och höjden följt av stoppning för 10px och gränser om 10px också.
div bredd: 100px; höjd: 100px; vaddering: 10px; gräns: 10px solid #eaeaea;
Webbläsarna kommer att expandera lådans storlek till 140px, där denna mängd 140px av den totala bredden / höjden består av tillägget av stoppning och den gränser som följer; 100px [bredd / höjd] + (2 x 10px [vaddering]) + (2 x 10px [gräns]).
Men ibland är detta resultat inte vad vi förväntar oss att det ska vara. Ibland behöver vi rutan för att alltid vara 100px oavsett vaddering eller gränser som lagts till.
För att övervinna ett sådant återkommande problem vid skapandet av webbsidayouten kan vi använda CSS3 box-dimensionering egendom för att kontrollera hur CSS-boxmodell borde fungera i webbläsarna.
Använda lådans storlek
De box-dimensionering egendom har två värdealternativ, först den innehåll-box; vilket är standardvärdet, när du använder det här värdet kommer rutmodellen att verka som vi har beskrivit ovan.
Och den andra är border-box, där rutans storlek kommer att beräknas genom att dra in det angivna innehållets storlek med vadderingen och gränserna tillagt.
div bredd: 100px; höjd: 100px; vaddering: 10px; gräns: 10px solid #eaeaea; box-dimensionering: gränsvärde; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-dimensionering: border-box; / * Safari * /
När vi till exempel har en låda som vad vi har beskrivit ovan (100px kvadrat med 10 pixlar för polstring och gränser) kommer innehållets storlek att minska till 60 bildpunkter, och rutans totala storlek förblir 100px, där ekvationen för subtraktionen kan beskrivas som följer; 100px [bredd / höjd] - ((2 x 10px [vaddering]) + (2 x 10px [gräns])).
- demo
- Hämta källa
Webbläsarsupport
De box-dimensionering egendom är stöds i alla webbläsare; Firefox 3.6+, Safari 3, Opera 8.5+ och Internet Explorer 8 och senare.
Så om du vet att de flesta besökarna inte använder Internet Explorer-versioner under 8, kan du använda den här användbara rekommendationen (tack vare Paul Irish).
* box-size: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-dimensionering: border-box; / * Safari * /
Biten ovan kommer att gälla box-dimensionering egendom till alla element på din webbsida.
Exempel
I det här avsnittet kommer vi att visa dig ett verkligt exempel på hur vi kan utnyttja detta box-dimensionering fast egendom. Vi kommer att skapa en enkel navigering, baserat på HTML-markupen nedan, med fem länkmeny i den.
Sedan lägger vi till några dekorativa stilar. till exempel, ställa in navigeringen fixa bredden för 500px och länkens bredd för 100px vardera, sedan inline listobjektet och ge olika bakgrunder för varje länkmeny så att du kan se skillnaden mellan dem.
nav width: 500px; marginal: 50px auto 0; höjd: 50px; nav ul vaddering: 0; marginal: 0; nav li float: left; nav a display: inline-block; bredd: 100px; höjd: 100%; bakgrundsfärg: #ccc; färg: # 555; text-dekoration: ingen; font-family: Arial, sans-serif; typsnittstorlek: 12pt; linjehöjd: 300%; text-align: center; nav a display: inline-block; bredd: 100px; höjd: 100%; färg: # 555; text-dekoration: ingen; font-family: Arial, sans-serif; nav li: nth-child (1) a bakgrundsfärg: # E9E9E9; gränsen till vänster: 0; nav li: nth-child (2) a bakgrundsfärg: # E4E4E4; nav li: nth-child (3) a bakgrundsfärg: #DFDFDF; nav li: nth-child (4) a bakgrundsfärg: # D9D9D9; nav li: nth-child (5) a bakgrundsfärg: # D4D4D4; gräns-höger: 0;
Vid denna tidpunkt ser vår navigering bara ut normalt.
Problemet kommer emellertid att komma när vi lägger till vänster eller höger gränser till länkmenyn.
nav en border-left: 1px solid #aaa; gräns-höger: 1px solid # f3f3f3;
Menyn kommer att överfalla till botten, eftersom länkens bredd inte längre är 100px. Det är nu 102px, vilket medför att navigeringens totala bredd blir 10px längre än vi har angivit ovan (500px).
För att lösa problemet måste vi tillämpa box-dimensionering egendom, enligt följande:
nav en border-left: 1px solid #aaa; gräns-höger: 1px solid # f3f3f3; box-dimensionering: gränsvärde; -moz-box-size: border-box; -webkit-box-dimensionering: gränslåda;
- demo
- Hämta källa
Vidare läsning
Och äntligen, om du är den äventyrliga typen och vill gräva djupare in i detta ämne, har vi sammanställt några utvalda referenser för dig:
- Förstå CSS Box Model - Tech Republic
- Boksstorleksfel i Firefox - BugZilla
- Box-dimensionering FTW - Paul Irish
