Dec
CSS Grundkunskap - Visual Formatting Model
Kategorier: CSSVisual Formatting Model definierar hur innehåll ska placeras på olika typer av visuella media. Till exempel skärmar, papper (utskrifter) och projektorer. För att få ordentlig koll på saker som float och position, vilka egentligen också tillhör Visual Formatting Model, behöver du förstå grunderna för modellen. Det är just detta den här artikeln tar upp och sammanfattar.
För att förstå Visual Formatting Model är det bra att först förstå boxmodellen ordentligt. Alla element på en sida skapar boxar av olika slag. Visual Formatting Model i CSS 2 definierar flera olika typer av boxar, men den här artikeln tar endast upp de vanligaste, block- och inline-boxar.
Block-element
Dessa element ritas upp visuellt som block med innehåll. Block-element kommer att dyka upp efter varandra vertikalt, det vill säga ovanpå varandra.
Höjden på ett block-element bestäms av vertikala marginaler, padding och borders samt CSS-värdet height. Exempel på element som är block från början är: p, h1 och div.
Inline-element
Element som är inline, t.ex. img, span och em, kommer att rita upp innehållet i rader ("in lines"). Även om inte boxarna syns så finns de där och omger innehållet i inline-boxen. Skillnaden är att de inte ritas upp ovanpå varandra som block med innehåll.
En inline-box kommer alltid att vara hög nog för att rymma innehållet. Man kan inte justera höjden på boxen genom att sätta olika height eller vertikala marginaler, padding eller border på den. Däremot kan man justera höjden något genom att ändra värdet line-height.
Anonyma boxar
I vissa fall skapas boxar utan att du ber om det. I exemplet ovan där en div innehöll lite text samt en span skapas en anonym inline-box runt all text, samt en vanlig inline-box runt innehållet i span-elementet. Har du en div som innehåller dels lite text och sedan en paragraf, kommer en anonym block-box att skapas runt den text som inte ligger inuti p-elementet.
Du kan inte påverka anonyma boxar med CSS men det är bra att veta om dem för att inse att allting skapar boxar i CSS.
CSS-värdet display
Om du vill ändra ett element från att vara till exempel block till inline, kan du göra det genom egenskapen display.
div.litenBox {
display: none;
}Här hittar du en exempelsida som visar vad som händer om man ändrar en span från inline till block.
Sätter du värdet display till "block" kommer boxen att bli en block-box, och sätter du värdet till "inline" kommer boxen att bli (surprise!) en inline-box. Sätter du däremot display till "none" kommer ingen box att genereras och innehållet kommer inte att ta upp något utrymme på sidan.
Olika positioneringssystem
Det finns tre olika positioneringssystem i CSS 2. Det första är det normala flödet vilket är det som tagits upp i denna artikel. Här placeras block-boxar ut som block ovanpå varandra och inline-boxar placeras ut horisontellt efter varandra. I kommande artiklar kommer de två andra systemen att tas upp, nämligen floats och absolut positionering. Egentligen tillhör relativ positionering det normala flödet, men mer om detta får du läsa i artikeln om absolut positionering.
TYCKTE DU OM ARTIKELN?
