|
|
| Rad 1: |
Rad 1: |
| == Att välja måttsättning med <code>box-sizing</code> ==
| |
| Det finns några olika varianter på hur man sätter storlek på sin box. Skillnaden är hur måttsättningen går till, men de delar alla på samma grundkoncept.
| |
|
| |
|
| Man styr vilken variant man vill ha med CSS-egenskapen <code>[[box-sizing]]</code>. Den kan sättas till ett par olika värden.
| |
| === <code>content-box</code> ===
| |
| Detta är det förvalda värdet, som används om du inte anger något annat.
| |
|
| |
| Bredden och höjd, <code>[[width]]</code> och <code>[[height]]</code>, anger enbart storleken på innehålls-delen och övriga delar av boxen ligger utanför detta värde. För att få ut den totala bredd som din box kommer att ta upp måste du själv summera ihop <code>[[width]]</code>, bredden på <code>[[padding]]</code> och bredden på eventuell kantlinje. Detta kan bli rätt krångligt om du vill ange en exakt storlek på en box.
| |
|
| |
| Ett exempel på de svårigheter som kan uppstå är om du skulle vilja ha två lådor som ska ta upp exakt 50 % vardera av sidbredden och sedan vill ha en kantram runt varje box. Om du sätter boxarnas bredd till <code>50%</code> så tar boxarna upp 100 % av sidan och eventuella kantlinjer kommer att göra att boxarna tar upp ''mer'' än 100 %, dvs de får inte plats på en och samma rad. Kantlinjen kan inte anges i procent och man använder ofta sig av måttenheten <code>px</code>. Men, hur många procent tar en <code>px</code> upp? Det finns lösningar på denna problematik, t.ex. genom att använda <code>[[calc]]</code>, men det är enklare att använda sig av nästa typ av <code>[[box-sizing]]</code>-värde.
| |
|
| |
| === <code>border-box</code> ===
| |
| Med denna variant så inkluderar värdet som man anger för bredd eller höjd, <code>[[width]]</code> och <code>[[height]]</code>, såväl utfyllnad, <code>[[padding]]</code>, som kantlinje, <code>[[border]]</code>. Marginalen, <code>[[margin]]</code>, har dock en egen bredd. Detta gör att det är mycket enklare att anpassa boxstorleken till hela innehållet.
| |
|
| |
| I de fall <code>border-box</code> gäller får elementet alltså den bredd som sätts i <code>width</code> oavsett vilka andra egenskaper som sätts (det samma gäller för höjd-egenskapen). Detta gör det mycket enklare att passa samman flera element på samma rad.
| |
|
| |
| <code>border-box</code> är nog det bästa värdet att ange för <code>[[box-sizing]]</code>. Det kan till och med vara en bra idé att slå på det för hela ditt dokument genom att lägga till följande CSS-regel:
| |
| <div class="well well-cyanide-light">
| |
| <syntaxhighlight lang="css">
| |
| * {
| |
| box-sizing: border-box;
| |
| }
| |
| </syntaxhighlight>
| |
| </div>
| |