Boxmodellen - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.13

2020-10-31T13:13:08Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.13
Rad 103:		Rad 103:

	<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:		<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">		<syntaxhighlight lang="css">
	* {		* {
Rad 109:		Rad 108:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	== Att skapa en enkel box ==		== Att skapa en enkel box ==
Rad 120:		Rad 118:
	</codepen>		</codepen>
	Lägg märke till att vår selektor är <code>div div</code>, detta väljer ut alla <code>div</code>:ar som ligger inuti en annan <code>div</code>. På liknande sätt kan vi t.ex. skapa en selektor som väljer ut alla stycken inuti en <code>div</code>, t.ex. med:		Lägg märke till att vår selektor är <code>div div</code>, detta väljer ut alla <code>div</code>:ar som ligger inuti en annan <code>div</code>. På liknande sätt kan vi t.ex. skapa en selektor som väljer ut alla stycken inuti en <code>div</code>, t.ex. med:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	div p {		div p {
Rad 126:		Rad 123:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* Konturlinje eller outline */

2020-10-20T12:24:18Z

Konturlinje eller outline

← Äldre version		Versionen från 20 oktober 2020 kl. 12.24
Rad 42:		Rad 42:

	Exempel:		Exempel:
	<codepen pen="vMZzVj" tab="css,result" height="~~150~~">		<codepen pen="vMZzVj" tab="css,result" height="225">
	</codepen>		</codepen>

PGJ: /* Kantlinjer eller border */

2020-10-20T12:24:06Z

Kantlinjer eller border

← Äldre version		Versionen från 20 oktober 2020 kl. 12.24
Rad 31:		Rad 31:

	Exempel:		Exempel:
	<codepen pen="vMZzzj" tab="css,result" height="~~250~~">		<codepen pen="vMZzzj" tab="css,result" height="225">
	</codepen>		</codepen>

PGJ: /* Utfyllnad eller padding */

2020-10-20T12:23:12Z

Utfyllnad eller padding

← Äldre version		Versionen från 20 oktober 2020 kl. 12.23
Rad 22:		Rad 22:

	Exempel:		Exempel:
	<codepen pen="mgwGjK" tab="css,result" height="~~175~~">		<codepen pen="mgwGjK" tab="css,result" height="225">
	</codepen>		</codepen>

PGJ: /* Kantlinjer eller border */

2020-10-20T12:22:46Z

Kantlinjer eller border

← Äldre version		Versionen från 20 oktober 2020 kl. 12.22
Rad 31:		Rad 31:

	Exempel:		Exempel:
	<codepen pen="vMZzzj" tab="css,result" height="~~150~~">		<codepen pen="vMZzzj" tab="css,result" height="250">
	</codepen>		</codepen>

PGJ: /* Utfyllnad eller padding */

2020-10-20T12:22:32Z

Utfyllnad eller padding

← Äldre version		Versionen från 20 oktober 2020 kl. 12.22
Rad 22:		Rad 22:

	Exempel:		Exempel:
	<codepen pen="mgwGjK" tab="css,result" height="~~150~~">		<codepen pen="mgwGjK" tab="css,result" height="175">
	</codepen>		</codepen>

PGJ: /* Innehållet */

2020-10-20T12:22:22Z

Innehållet

← Äldre version		Versionen från 20 oktober 2020 kl. 12.22
Rad 15:		Rad 15:

	Ett enkelt exempel:		Ett enkelt exempel:
	<codepen pen="wZeEjN" tab="css,result" height="~~150~~">		<codepen pen="wZeEjN" tab="css,result" height="175">
	</codepen>		</codepen>

PGJ: /* Att skapa en enkel box */

2020-09-03T09:30:44Z

Att skapa en enkel box

← Äldre version		Versionen från 3 september 2020 kl. 09.30
Rad 117:		Rad 117:

	Kanske vi har en annan <code>div</code> inuti den första och vi vill att denna ska stajlas enligt följande; hälften så stor, ingen padding och blå bakgrund. Då skulle vi kunna lägga till följande regel:		Kanske vi har en annan <code>div</code> inuti den första och vi vill att denna ska stajlas enligt följande; hälften så stor, ingen padding och blå bakgrund. Då skulle vi kunna lägga till följande regel:
	<codepen pen="wKwXvK" height="~~400~~" tab="css,result">		<codepen pen="wKwXvK" height="600" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att vår selektor är <code>div div</code>, detta väljer ut alla <code>div</code>:ar som ligger inuti en annan <code>div</code>. På liknande sätt kan vi t.ex. skapa en selektor som väljer ut alla stycken inuti en <code>div</code>, t.ex. med:		Lägg märke till att vår selektor är <code>div div</code>, detta väljer ut alla <code>div</code>:ar som ligger inuti en annan <code>div</code>. På liknande sätt kan vi t.ex. skapa en selektor som väljer ut alla stycken inuti en <code>div</code>, t.ex. med:

PGJ: /* Att skapa en enkel box */

2020-09-03T09:29:31Z

Att skapa en enkel box

← Äldre version		Versionen från 3 september 2020 kl. 09.29
Rad 112:		Rad 112:

	== Att skapa en enkel box ==		== Att skapa en enkel box ==
	Låt oss säga att vi har en <code>div</code> som vi vill stajla till lite. Vi vill skapa en box som tar upp hela sidan i bred, är <code>~~200px~~</code> hög, har fyllning som är <code>1em</code> och som har grön bakgrund. Då skulle CSS-regeln kunna se ut så här:		Låt oss säga att vi har en <code>div</code> som vi vill stajla till lite. Vi vill skapa en box som tar upp hela sidan i bred, är <code>100px</code> hög, har fyllning som är <code>1em</code> och som har grön bakgrund. Då skulle CSS-regeln kunna se ut så här:
	<codepen pen="pjzKze" height="300" tab="css,result">		<codepen pen="pjzKze" height="300" tab="css,result">
	</codepen>		</codepen>

PGJ: /* Bredd och höjd */

2019-04-12T11:26:17Z

Bredd och höjd

← Äldre version		Versionen från 12 april 2019 kl. 11.26
Rad 80:		Rad 80:
	Det vanligaste vi vill ange för en box är höjd och bredd. Dessa sätts med CSS-egenskaperna <code>[[width]]</code> och <code>[[height]]</code>. Man kan använda alla de vanliga [[Måttenheter_i_CSS\|CSS-måttenheterna]].		Det vanligaste vi vill ange för en box är höjd och bredd. Dessa sätts med CSS-egenskaperna <code>[[width]]</code> och <code>[[height]]</code>. Man kan använda alla de vanliga [[Måttenheter_i_CSS\|CSS-måttenheterna]].
	Om vi vill skapa en box som är <code>200px</code> runt om, skulle vi kunna använda följande regel:		Om vi vill skapa en box som är <code>200px</code> runt om, skulle vi kunna använda följande regel:
	<codepen pen="rbwZbW" tab="css,result" height="~~250~~">		<codepen pen="rbwZbW" tab="css,result" height="350">
	</codepen>		</codepen>