Struktur

Boksmodell

Som kommentert i modulen er det slik at parseren i nettleseren etter beste evne, og med betydelig toleranse, lager en XML-struktur av websiden. En slik struktur manifesterer seg i det som vanligvis kalles boksmodellen. Det vil si at vi har en hierarkisk modell der elementer omslutter hverandre. Hvert element har en forelder og vilkårlig mange barn. Hele tankegangen både i CSS og Javascript er basert på dette. I CSS vet vi at elementer arver egenskaper fra den omgivende boksen og vi bruker strukturen når vi skriver selektorer. I Javascript kan vi bruker de "vanlige" trestruktur metodene for å traversere element-treet. Vi kan se på foreldre, barn og søsken.

Du kan få et godt innblikk i denne strukturen når du bruker de utviklings/analyse verktøyene som ligger i moderne nettlesere. Nedenfor kan du gjøre et eksperiment for¨å se hvordan boksene er plassert på denne siden. Klikk på knappen "toggleview" for å se boksstrukturen. Det er lagt inne en liten forsinkelse for å illustrere rekkefølgen i en top-down traversering av strukturen.

toggleView

Javascript- koden som gjør jobber er slik:

var boxView=false;
var tagList=[];
var delay=50;
//these will survive blockmode:
//"toggleButton" and "elementCount"
// collect all elements of type 1, ie tags
function collectList(){
    tagList=[];
    var root=document.getElementsByTagName('body')[0];
    collect(root);
    document.getElementById("elementCount").innerHTML=
        tagList.length+" elementer";
}
function collect(elt){
    if(elt.nodeType!=1)
        return;
    tagList.push(elt);
    //console.log(elt.tagName);
    var children=elt.childNodes;
    for(var i=0;i < children.length; i++)
        collect(children[i]);
}
// recover and show togglebutton and counter
function recoverButton(){
    document.getElementById("toggleButton")
        .setAttribute('style',"");
    document.getElementById("elementCount")
        .setAttribute('style',"color:black");
}
// swap view block - normal
function toggleView(){
    if(boxView){
        location.reload();
        boxView=false;
        tagList=[];
        return;
    }
    boxView=true;
    
    collectList();
    delay=Math.round(5000/tagList.length);
    toggleOne(0);
}
function toggleOne(index){
    var s=tagList[index].getAttribute('style')+";";
    tagList[index].setAttribute('style',s+
    'border-style:solid; border-color:blue; border-width:thin;\
    color:#DEDEDE;background-color:white;');
        
    var ix=index+1;
    if(ix < tagList.length){
        setTimeout(toggleOne.bind(this,ix),delay);
    }
    else
        recoverButton();
}

Posisjonering

Hvis vi ikke bestemmer noe annet plasseres elementene slik vi plasserer dem i kildekoden. De to p-elementene under inneholdes i div-elementet.

...
<div>
	<p>
	</p>
	<p>
	</p>
</div>
...

Så finnes det en rekke CSS-mekanismer for å bestemme hvordan de skal plasseres, typisk margin, display, flex. Vi lager CSS-klasser som kombinerer slike egenskaper.Vi går ikke inn på disse detaljene her, de er nærmere omtalt i materialet CSS.

Vi kan imidlertid til en viss grad bryte ut av mønsteret ved å bruke posisjonering absolut, relative og fixed.

Dette endrer ikke på elementenes plassering i sidestrukturen, boksmodellen. Dette kan du forsikre deg om ved å bruke utviklingsverktøyet i nettleseren. De 5 posisjoneringstypene har imidlertid konsekvenser på hva som arves og hvordan elementene belegger plass på siden. HTML-fragmentet og tilhørende stilsett finner du nedenfor.

<div class="yellowbox" >
Jeg har 5 barn med litt forskjellig plassering
    <div class="box1" >
    Jeg har negativ margin
    </div>
    <div class="box2" >
    Jeg er  relativ
    </div>
    <div class="box3" >
    Jeg er absolute
    </div>
    <div class="box4" >
    Jeg er fixed (sorry)
    </div>
    <div class="box0" >
    Jeg bare er her
    </div>
</div>

/* the yellow box with the 5 children*/
.yellowbox{background-color:yellow;
        border-style:solid;border-width:thin;color:green;
        font-weight:bold;margin-left:70px;width:120px;
    }        
    .box0,.box1,.box2,.box3,.box4{width:50px}        
    .box1{margin-left:-45px}
    .box2{position:relative;left:150px;  top:0px;}
    .box3{position:absolute;left:350px;  top:960px;}
    .box4{position:fixed;left:400px;  top:700px; }

Det er en god del finurligheter involvert i dette, og det er slike ting som kan ta tid å få på plass.