Vefforritun 1 — TÖL107G
Ólafur Sverrir Kjartansson, osk@hi.is
- Gerð boxa
block vs. inline; display eigindið
- Eðlilegt flæði
- Staðsetning með
position
- Float
- Þriðja víddin
Normal flow – eðlilegt flæði
Ef við höfum ekki skilgreint hvernig element á að haga sér, er það í eðlilegu flæði (normal flow) og er sjálfgefið annað hvort block eða inline
- block element forma blokkir og fylla upp í breidd foreldris
- inline element forma ekki blokkir heldur dreifa sér í línur, fá ekki lárétt
margin; width eða height
Display
display stýrir (meðal annars) því hvernig element hagar sér í eðlilegu flæði:
display: block; lætur element haga sér sem blokkdisplay: inline; hagar sér sem inline
display: inline-block; element er raðað í línu en hagar sér eins og block (getur ferngið lárétt margin; width eða height)display: none;, element er algjörlega fjarlægt, ekki með í útreikningum
Efni í boxi
overflow leyfir okkur að skilgreina hvað ef efni flæðir út fyrir box
visible (sjálfgefið) sýnir efni, því það að geta lesið/séð efni er yfirleitt það sem við viljumhidden felur efni sem flæðir út fyrirscroll efnið flæðir og skrunstikur birtastauto birtir efni ef pláss, annars skrunstikur
- Þegar við takmörkum hæð á efni viljum við hugsa um hvað gerist ef við þurfum að birta meira efni
- Sjálgefið flæðir efni yfir,
overflow: hidden ódýr en léleg lausn
overflow: auto yfirleitt betri lausn
Dæmi um display og overflow
Staðsetning
position eigindi stillir hvernig element hegðar sér:
static – eðlilegt flæði, sjálfgefið gildirelative – hlutfallslegt í eðlilegu flæðiabsolute – skilgreinum algjörlega hvar box birtistfixed – skilgreinum út frá glugga hvar box er faststicky – fast, hlutfallslega út frá foreldri
Containing block
- Að gefa element
position sem er ekki static gerir það að containing block
- Fyrsta containing block er rótar element, yfirleitt
<html>
- Sumir útreikningar miða við containing block
Offset
- Offset eigindi skilgreina staðsetningu ef position er ekki
static
top, bottom, left eða right- Neikvæð gildi leyfð
position: relative
- Hlutfallsleg birting
- Staðsetning á boxi reiknuð út frá eðlilegu flæði
- Síðan er það flutt hlutfallslega út frá offset skilgreiningum
- Skilur eftir sig „plássið“ sem reiknað var í eðlilegu flæði
position: absolute
- Nákvæm staðsetning
- Tökum box út úr eðlilegu flæði og staðsetjum algjörlega út frá containing block
- Skilja ekki eftir sig pláss—eru ekki með í venjulegu flæði
Fyllt út í foreldri
- Getum notað
position: absolute; á barn með öll offset eigindi sett í 0 til að fylla út í foreldri
- Foreldri verður að vera containing block
.fill {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parent {
position: relative;
}
position: fixed
- Föst birting
- Tökum box út úr eðlilegu flæði og staðsetjum algjörlega út frá viewport
- Hreyfast ekki þegar skjali er skrollað
- Skilja ekki eftir sig pláss—eru ekki með í venjulegu flæði
Dæmi
position: sticky
- Klístruð staðsetning
- Samblanda af hlutfallslegri og fastri staðsetningu
- Staðsetning er reiknuð út frá eðlilegu flæði, þegar komið er að ákveðnum þröskuldi á containing block sem getur skrunað, þá er það reiknað sem það væri hlutfallslega fast
- Dæmi um sticky
Þriðja víddin
- Box eru ekki aðeins staðsett í tvívíðu rúmi, þau liggja líka á z-ás
- Staðsetning á z-ás ræðst af stacking order
- Getum átt við með
z-index sem setur stacking order eftir okkar höfði
- Hærra
z-index setur element nær notanda, hærra á z-ás
Þriðju víddar vesen
- Höfum mörg element í einu sem liggja upp við hvert annað með sama z-index
- Viljum birta annað element innan eins af þeim sem á að flæða út úr
- Seinna skilgreint í tré fær hærri forgang
position dæmi
Floats
float er Skilgreint með float: left, right eða none- Ekki í eðlilegu flæði, heldur er boxi „fleytt“ til hægri eða vinstri m.v. línu sem það er í
- Ef það er ekki nóg lárétt pláss er boxi ýtt niður þar til það kemst fyrir
- Getum stýrt flæði kringum float box með
clear: left, right eða both
- Ef við „hreinsum“ ekki, getum við lent í vandræðum með ytri box, þau fá ekki hæð
clearfix eru leiðir til að losna við þessa hegðun- Í dag ætti ekki að nota
float til að stýra útliti, í staðin notum við flexbox og grid
Dæmi um float