Een kijkje in CSS3 Box-dimensionering
Niet zo lang geleden, toen we een doos in een webpagina, laten we zeggen met een div, wij specificeren 100px voor zowel de breedte als de hoogte, gevolgd door vulling voor 10px en grenzen van ongeveer 10px ook.
div width: 100px; hoogte: 100 px; opvulling: 10px; rand: 10px vaste #eaeaea;
De browsers breiden de grootte van het vak uit naar 140px, waarbij dit aantal van 140px van de totale breedte / hoogte bestaat uit de toevoeging van de vulling en de borders als volgt; 100px [breedte / hoogte] + (2 x 10px [padding]) + (2 x 10px [rand]).
Soms is dit resultaat echter niet wat we ervan verwachten. Soms hebben we de doos nodig om altijd te zijn 100px ongeacht de opvulling of de randen die zijn toegevoegd.
Om een dergelijk terugkerend probleem te overwinnen bij het maken van een webpagina-opmaak, kunnen we de CSS3 gebruiken box-sizing eigenschap om te bepalen hoe de CSS-doosmodel zou moeten werken in de browsers.
Box-sizing gebruiken
De box-sizing property heeft twee waardeopties, eerst de Inhoud-box; wat de standaardwaarde is, bij gebruik van deze waarde gedraagt het boxmodel zich zoals we hierboven hebben beschreven.
En de tweede is border-box, waar de grootte van het vak wordt berekend door de grootte van de opgegeven inhoud af te trekken met de opvulling en de randen toegevoegd.
div width: 100px; hoogte: 100 px; opvulling: 10px; rand: 10px vaste #eaeaea; box-sizing: border-box; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Als we bijvoorbeeld een doos hebben zoals wat we hierboven hebben beschreven (100px vierkant met 10 pixels voor de opvulling en de randen), wordt de inhoud kleiner naar 60px, en de totale grootte van de doos blijft 100px, waar de vergelijking van de aftrekking als volgt kan worden beschreven; 100px [breedte / hoogte] - ((2 x 10px [padding]) + (2 x 10px [rand])).
- demonstratie
- Download de bron
Browserondersteuning
De box-sizing eigendom is ondersteund in alle browsers; Firefox 3.6+, Safari 3, Opera 8.5+ en Internet Explorer 8 en hoger.
Dus, als u weet dat de meeste van uw bezoekers geen Internet Explorer-versies onder de 8 zullen gebruiken, kunt u deze nuttige aanbeveling gebruiken (met dank aan Paul Irish).
* box-sizing: border-box; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Het bovenstaande fragment past de box-sizing eigendom van alle elementen op uw webpagina.
Voorbeeld
In deze sectie laten we u een realistisch voorbeeld zien van hoe we hier gebruik van kunnen maken box-sizing eigendom. We zullen een eenvoudige navigatie creëren, gebaseerd op de HTML-markup hieronder, met daarin het vijf-link-menu.
Vervolgens zullen we enkele decoratieve stijlen toevoegen; zoals, stel de navigatie's in fix breedte voor 500px en de breedte van de link voor 100px elk, plaats dan het lijstitem inline en geef verschillende achtergronden voor elk koppelingsmenu, zodat u het verschil ertussen kunt zien.
nav width: 500px; marge: 50px auto 0; hoogte: 50px; nav ul opvulling: 0; marge: 0; nav li float: left; nav a display: inline-block; breedte: 100 px; hoogte: 100%; achtergrondkleur: #ccc; kleur: # 555; tekstdecoratie: geen; lettertype-familie: Arial, sans-serif; lettergrootte: 12pt; regelhoogte: 300%; text-align: center; nav a display: inline-block; breedte: 100 px; hoogte: 100%; kleur: # 555; tekstdecoratie: geen; lettertype-familie: Arial, sans-serif; nav li: nth-child (1) a background-colour: # E9E9E9; grens links: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-colour: # D4D4D4; grens rechts: 0;
Op dit moment ziet onze navigatie er gewoon normaal uit.
Het probleem zal echter optreden wanneer we links of rechts grenzen aan het linkmenu toevoegen.
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
Het menu loopt over naar de onderkant, omdat de breedte van de koppeling niet langer is 100px. Het is nu 102px, waardoor de totale breedte van de navigatie is 10px langer dan we hierboven hebben gespecificeerd (500px).
Om dit probleem te verhelpen, moeten we het box-sizing eigendom, als volgt:
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
- demonstratie
- Download de bron
Verder lezen
En tot slot, als je de avontuurlijke type bent, en je wilt dieper op dit onderwerp ingaan, hebben we een paar geselecteerde referenties voor je samengesteld:
- Het CSS Box Model begrijpen - Tech Republic
- Fout in de grootte van het vak in Firefox - BugZilla
- Box-dimensionering FTW - Paul Irish
