Hjelp med CSS boks modellen...

[DrPhD]

Hei

 

Jeg driver å lærer meg CSS, og har kommet til Box modellen. Virker ganske innviklet for meg, samtidig lærer jeg via en engelsk ressurs og har veldig dårlige engelsk kunnskaper.

 

Noen som vet om en norsk nettside man kan lære CSS?

Trenger en kilde som kan forklare konkret hvordan funksjonene fungerer..

 

Takker på forhånd for eventuelle svar.

Endret 16. mars 2011 av DrPhD

[greygenic]

Vet ikke om jeg ville ha kalt det "funksjoner", det er mer "egenskaper"..., og det er igrunn ikke altfor innviklet.

 

Vet ikke om noen god norsk side, har bare w3schools (http://www.w3schools.com/css/css_boxmodel.asp) jeg vil anbefale.

 

Og det er spesielt sånn med dette, som det er med andre ting i livet: 'Øvelse gjør mester'.

 

Det du gjør er derfor å sette deg ned, og eksperimentere frem og tilbake med koden, for å se hva som skjer.

[MikkelRev]

Norsk side med videoer: http://hjemmeside.org/koding/css

[agrimsrud]

CSS Box Model er et veldig enkelt prinsipp som er litt mer komplisert å forklare, og som gjerne blir forklart så innviklet at det virker vanskelig...

 

Kort sagt, så er det primært fire CSS-verdier som påvirker størrelsen til et element. Vi har width/height, padding, border og margin. Vi kan se for oss at disse ligger utenpå hverandre som "skall".

 

Dvs. at når du skal regne ut bredden eller høyden på et element, så må du ta høyde for alle disse fire verdiene, ikke bare hva du setter som width/height.

 

I eksempelet under, er width satt til 468px, dvs. at innholdet/teksten har 468 piksler å boltre seg på. Men selve elementet blir større enn dette. For å regne ut, legger vi sammen alle verdiene:

 

Width: 468px

Padding: 10px (venstre side) + 10px (høyre side)

Border: 1px (venstre side) + 1px (høyre side)

Margin: 15px (venstre side) + 15px (høyre side)

Total bredde = 468 + (10+10) + (1+1) + (15+15) = 520 px

 

(Bildet er hentet fra ShortStackLab)

 

Det er fort gjort å glemme at border faktisk tar plass. Om så bare 1px på hver side, men det blir fortsatt feil når vi jobber med piksel-perfeksjonisme som mål

 

I tillegg kan det også nevnes at elementets bakgrunnsfarge eller bakgrunnsbilde er synlig til og med border-skallet, men ikke i margin-skallet (dette er gjennomsiktig).

 

Tror ikke jeg har glemt å nevne noe av stor betydning her, og håper ikke jeg bare gjentok noe du allerede har fått med deg

[DrPhD]

Aha. Nå ble det faktisk mye enklere å forstå

Takker for forklaringen