PGJ: Tömde sidan

2019-02-08T07:31:21Z

Tömde sidan

← Äldre version		Versionen från 8 februari 2019 kl. 07.31
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>~~

PGJ: Skapade sidan med '== Att välja måttsättning med `box-sizing` == Det finns några olika varianter på hur man sätter storlek på sin box. Skillnaden är hur måttsättningen går...'

2019-02-08T07:30:57Z

Skapade sidan med '== 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...'

Ny sida

== 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>

Box model - Versionshistorik

PGJ: Tömde sidan

PGJ: Skapade sidan med '== Att välja måttsättning med box-sizing == Det finns några olika varianter på hur man sätter storlek på sin box. Skillnaden är hur måttsättningen går...'

PGJ: Skapade sidan med '== Att välja måttsättning med `box-sizing` == Det finns några olika varianter på hur man sätter storlek på sin box. Skillnaden är hur måttsättningen går...'