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
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å:
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.