CSS Box model

Dragan Filipović Drugi deo - Skripta, Kurs Comments (0)

Osnove

Da biste razumeli pozicioniranje elemenata na stranici pomoću CSS-a, potrebno je prvo da razumete Box Model. Da bi se lakše predstavili, u ovoj lekciji svi elementi u dokumentu su dati kao pravougaoni boks čiji je sadržaj okružen: marginama, Padding i ivicama.

box

Box Model se sastoji od pet osnovnih svojstava elemenata: Width, Height, Margin, Padding, Border i Background koji tehnički nije deo Box modela, ali se često uključuje. Margine su uvek transparentne i odvajaju element od drugih elemenata na stranici, okviri (Borders) mogu biti različitih stilova i definišu granice elementa. Padding odvaja sadržaj elementa (Content) od njegovih okvira. Background podešavanja elementa se odnose na oblast unutar okvira zajedno sa Padding i Content delom.

U cilju ilustrovanja Box Modela, Padding deo je prikazan u nešto tamnijoj sivoj boji. Margins, Borders i Padding su opcioni atributi, ali zbog kalkulisanja pozicije i veličine, ako nije drugačije specificirano, svi imaju difoltnu širinu 0. Za svaku stranicu box-a(Top, Bottom, Left, Right) mogu biti postavljene različite vrednosti širine. Margine mogu imati i negativnu vrednost. Boks može da sadrži i više drugih bokseva, kreirajući hijerarhiju bokseva što predstavlja ugnježdene elemente stranice. Prozor čitača u ovoj hijerarhiji predstavlja Root element.

Postoje dva osnovna tipa bokseva: Block i Inline.

P, DIV i TABLE elementi generišu block bokseve dok B, I, SPAN Tag-ovi i konkretni sadržaj (tekst i slike) generišu Inline bokseve.

Takođe tip boksa može biti određen korišćenjem svojstva Display. Ako na primer, svojstvu Display Inline elementa dodelimo vrednost Block, tada će taj element biti tretiran kao Blok element. Boks neće biti kreiran ako svojstvu Display dodelite vrednost None. U tom slučaju, čitač će se ponašati kao da element ne postoji. Takođe i bilo koji ugnježdeni elementi unutar tog elementa neće biti prikazani iako im je dodeljena neka druga Display vrednost.

Postoje tri načina pozicioniranja ili tri šeme: Normal, Float i Absolute. Svaki način ima svoj set pravila.

Normal Flow

Normal Flow je difoltni način rada kod pozicioniranja. Primenjuje se na bilo koji element koji nema specificiranu poziciju Absolute ili Fixed i koji nije Floated. Blok boksevi su pozicionirani jedan ispod drugog po vertikali dok su Inline boksevi pozicionirani po horizontali, s leva na desno. Vertikalne margine kolapsiraju u Normal Flow-u. To znači da se umesto sabiranja vrednosti margina gornjeg i donjeg boksa računa samo margina koja je veća – kao što je ilustrovano na slici ispod.

normal

Horizontalne margine nikad ne kolapsiraju.

Floats

Floating se ostvaruje preko svojstva Flaot sa vrednostima levo i desno. Kada se dodeljuje Float svojstvo element je vertikalno pozicioniran isto kao što bi bio u Normal Flow-u, dok je horizontalno pozicioniran skroz na levu ili desnu stranu koliko je moguće unutar svog bloka u kome je sadržan. Okolni Inline sadržaj je tada pozicioniran na suprotnoj strani. Sledeći kod i slika ilustruju Floated element koji je definisan kao deo Inline teksta.

<p>
<span style=“float:right; width:30%;“>content…</span> content content content content content content content…
</p>

floats
Float svojstvo može biti postavljeno na: Left, Right,Nnone ili Inherit. boks kome je dodeljeno svojstvo trebalo bi da ima definisanu širinu, inače će popuniti svoj sadržajni blok horizontalno kao i da nema dodeljeno svojstvo Float i neće ostaviti mesta za drugi sadržaj da se pozicionira okolo. Za razliku od bokseva u Normal Flow-u vertikalne margine Floated elemenata nikada ne kolapsiraju sa marginama elemenata iznad ili ispod. Flaoted boks može da preklopi susedne Block Level Boxes u Normal Flow-u. Sledi primer koda i slika gde Flaoted element ima mnogo više teksta nego njegov sadržajni blok.

<p>
<span style=“float:right; width:30%;“> content content content content content content content content content content content content content content… </span> content content content content content content
</p>
<p>content content content content content content content content content content content content
</p>

floats2

U ovom slučaju možete primetiti da se Floated boks preklapa preko svog Parent boksa i boksa koji dolazi posle njega. Ovo se može izbeći dodavanjem svojstva Clear. Postavićemo clear:right drugom boksu. Ovo pravilo će ga pomeriti na dole odmah ispod Floated boksa.

<p>
<span style=“float:right;width:30%;“> content content content content content content content content content content content content content content… </span> content content content content content content
</p>
<p style=“clear:right;“> content content content content content content content content content content content content
</p>

clear

CSS pozicioniranje: apslolutno, relativno i fiksno pozicioniranje

Relativno pozicioniranje

Kada je elementu dodeljeno svojstvo position:relative, tada je element inicijalno pozicioniran prema Normal Flow pravilima. Takođe su i okolni boksevi pozicionirani shodno tome. Zatim se element pomera prema Offset svojstvima, koje mogu biti Left, Right, Top i Bottom. Vrednost svakog ovog svojstva predstavlja razdaljinu za koju odgovarajuća ivica boksa treba biti pomerena u odnosu na poziciju boksa u Normal Flow-u.

rel poz

Normal Flow i Relativno poziciniranje

Boks 1 koristi relativno pozicioniranje da bi se pomerio udesno za 120px u odnosu na njegovu startnu poziciju. Boks 2 i Boks 3 ostaju u istom mestu, nepromenjene pozicije, (ponašaju se kao da Boks 1 nije ni promenio poziciju, tj. kao da je ostao na istom mestu) jer relativno pozicioniranje ne pomera elemente iz Normal Flow-a. Relativno pozicioniranje nam dozvoljava da definišemo gde element treba da bude pozicioniran (relativno u odnosu na stranicu ili relativno u odnosu na Parent element).

Apsolutno pozicioniranje

Elementi sa svojstvom position:absolute se uklanjaju tj. pomeraju iz Normal Flow-a i ne utiču na ostale elemente. Pozicija elemenata se određuje na osnovu Offset vrednosti koje mogu biti Left, Right, Top i Bottom. Ove vrednosti se ponašaju skoro isto kao i kod relativnog pozicioniranja, sem što se kod apsolutnog pozicioniranja element pomera u odnosu na Parent element koji je takođe pozicioniran tj. kome je dodeljeno svojstvo position. Apsolutno pozicioniranje nam dozvoljava da definišemo gde element treba da bude pozicioniran (apsolutno u odnosu na stranicu ili u odnosu na Parent element koji isto ima positioning atribut).

apsolutno poz

Boks 1 je apsolutno pozicioniran, Left i Top svojstva ga pomeraju na desno i dole, a Boks 2 i Boks 3 se ponašaju kao da Boks 1 ni ne postoji i zauzimaju njegovu poziciju u Normal Flow-u. Zbog svoje nove pozicije Boks 1 se preklapa sa Boksom 3 i bilo koja promena u sadržaju Boksa 3 ne utiče na poziciju ostala dva elementa.

Fiksno pozicioniranje

Fiksno pozicioniranje je specijalan način apsolutnog pozicioniranja. Kada se skroluje stranica, fiksiran element se ne pomera kao i svi ostali elementi. Ovaj atribut se ne ponaša isto u svim čitačima, a IE6 i ranije verzije Internet Explorer-a ga uopšte ne podržavaju. #boks1 {position:fixed; left:10%;} Element je pomeren na desno za 10% od ukupne širine prozora čitača i fiksiran je u tom mestu tako da, kada skrolujete kroz stranicu, Boks 1 ostaje u jednom mestu.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.