box-metoden Länkar till självstudier: http://webdesignskolan.se/css-layout/css_layout.php#layout

ID eller CLASS

id används för att sätta regler på ett enskilt specifikt element. class används för regler som gäller för flera element.

Enkel ruta

<!doctype html>
<html>
<head>

<meta charset="utf-8" />

<style>
div.box1
{
width:220px;
padding:10px;
border:1px solid gray;
margin:0px;
}
div.box2
{
width:220px;
padding:10px;
border:1px solid gray;
margin:0px;
}
div.box3
{
width:220px;
padding:10px;
border:1px solid gray;
margin:0px;
}
</style>
</head>

<body> <div class="box1">Genom att göra boxar kan man bestämma hur utseendet ska se ut.</div> <div class="box2">Om man gör enkla boxar och bara radar upp dem efter varandra behöver man inte fixa med placering</div> <div class="box3">Dock blir de alltid under varandra</div> </body> </html>

Olika typer av kantlinjer:

Ingen kantlinje border: none

Prickig kantlinje border: 2px black dotted

Streckad kantlinje border: 2px black dashed

Heldragen linje border: 2px black solid

Dubbel heldragen linje border: 2px black double

A groove border border: 2px black groove

A ridge border border: 2px black ridge

Nedsänkt kantlinje border: 2px black inset

Upphöjd kantlinje border: 2px black outset

Dold kantlinje border: 2px black hidden

Box-sizing

Box-sizing handlar om hur webbläsaren räknar på storlekar för de olika delarna av boxen. Det finns några värden man behöver hålla koll på:

Margin (transparent)
Border
Padding
Content

Om man ger en box värdet box-sizing: borderbox kommer den att vara som man tänkt. Bredd och höjd beräknas utifrån och in. Är boxen för stor så krymps den för att få plats.