Web programiranje → HTML, CSS i JavaScript → CSS: box model, pozadine i pozicioniranje

CSS: box model, pozadine i pozicioniranje

Lekcija 6 od 17 · HTML, CSS i JavaScript

Za pregledač je svaki element pravougaonik: sadržaj, unutrašnji razmak, okvir i spoljni razmak. Kada razumeš ovaj „model kutije“, znaš zašto se elementi razmiču, kako se prave kartice i dugmad i kako se element postavi tačno gde želiš.

Pre nego što počneš: potrebno predznanje – CSS osnove.
Kako da učiš: zadatke na kraju prvo uradi sam/a u svom editoru; uputstvo i rešenje otvori tek posle toga. Svaki primer ima kod i živi rezultat ispod njega; kod prekucaj u svoj fajl i menjaj ga.

Delovi kutije

┌───────────── margin (spoljni razmak) ─────────────┐
│  ┌─────────── border (okvir) ──────────────────┐  │
│  │  ┌──────── padding (unutrašnji razmak) ──┐  │  │
│  │  │                                        │  │  │
│  │  │        content (sadržaj)               │  │  │
│  │  │        width × height                  │  │  │
│  │  └────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────┘
<style>
  .kutija {
    width: 220px;
    padding: 20px;                 /* unutra: od teksta do okvira */
    border: 4px solid #2b7bb9;     /* debljina, vrsta, boja */
    margin: 16px;                  /* spolja: od okvira do susednih elemenata */
    background: #eef6fc;
  }
</style>
<div class="kutija">Kutija 1</div>
<div class="kutija">Kutija 2</div>

Rezultat:

ZapisZnačenje
padding: 10px;isto sa sve četiri strane
padding: 10px 20px;gore i dole 10, levo i desno 20
padding: 5px 10px 15px 20px;gore, desno, dole, levo (kao kazaljka na satu)
margin: 0 auto;blok element sa zadatom širinom postaje centriran
padding-top, margin-left…samo jedna strana

box-sizing: koliko je element zapravo širok

Po osnovnom pravilu width je širina samo sadržaja, pa je kutija iz primera široka 220 + 2·20 + 2·4 = 268px. To zbunjuje, zato skoro svi sajtovi na početku CSS-a pišu:

*, *::before, *::after {
  box-sizing: border-box;   /* width uključuje padding i border */
}

Sa border-box kutija sa width: 220px je široka tačno 220px, a sadržaju ostaje 220 − 40 − 8 = 172px.

Okviri, senke i pozadine – primer kartice

<style>
  * { box-sizing: border-box; }
  body { background: #f2f4f7; }
  .kartica {
    max-width: 280px;
    background: white;
    border-radius: 12px;                        /* zaobljeni uglovi */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);    /* senka: x y zamućenje boja */
    padding: 16px;
    margin: 10px auto;
  }
  .kartica h3 { margin-top: 0; }
  .dugme {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(90deg, #2b7bb9, #1f5f91);   /* prelaz boja */
    color: white;
    border-radius: 999px;
    text-decoration: none;
  }
  .dugme:hover { opacity: 0.85; }
</style>
<div class="kartica">
  <h3>Kurs HTML i CSS</h3>
  <p>10 lekcija, primeri i vežbe za osnovce.</p>
  <a class="dugme" href="#">Počni</a>
</div>

Rezultat:

SvojstvoPrimer
border-radius8px; 50% od kvadrata pravi krug
box-shadow0 2px 6px rgba(0,0,0,.2)
background-colorboja pozadine
background-imageurl("slike/pozadina.jpg") ili linear-gradient(...)
background-size: coverslika pokriva ceo element
max-widthnajveća širina – na užem ekranu element se smanjuje

display: block, inline, inline-block, none

VrednostPonašanje
blocknovi red, cela širina, prima width/height (div, p, h1)
inlineu redu sa tekstom, ignoriše width/height (a, span, strong)
inline-blocku redu, ali prima width, height i padding – dugmad, bedževi
noneelement se ne prikazuje i ne zauzima mesto (koristi se sa JavaScript-om za skrivanje)
flex, gridraspoređivanje dece – sledeća lekcija

Pozicioniranje

<style>
  .okvir { position: relative; height: 140px; background: #eef6fc; border: 1px dashed #2b7bb9; }
  .bedz  { position: absolute; top: 8px; right: 8px; background: crimson; color: white; padding: 4px 10px; border-radius: 999px; }
  .malo  { position: relative; left: 30px; top: 10px; background: #fff3cd; display: inline-block; padding: 4px; }
</style>
<div class="okvir">
  <span class="bedz">NOVO</span>
  <span class="malo">pomeren za 30px udesno i 10px nadole</span>
</div>

Rezultat:

positionPonašanje
staticosnovno – element je na svom mestu u toku stranice
relativepomeren u odnosu na svoje mesto (top, left…); služi i kao „sidro“ za absolute decu
absoluteizvađen iz toka i postavljen u odnosu na najbližeg pozicioniranog roditelja – bedževi, oznake na slikama
fixedzalepljen za prozor, ne pomera se pri skrolovanju – dugme „na vrh“
stickyponaša se normalno dok ne dođe do ivice, pa se zalepi – zaglavlja tabela, meniji

Za raspoređivanje celih delova stranice ne koristi se position, nego flexbox i grid.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

ZADATAK 01Težina: srednje

Kartica profila

Napravi karticu profila širine najviše 300px, centriranu na stranici: okrugla slika 100×100, ime, kratak opis i dugme „Prati“. Kartica ima belu pozadinu, zaobljene uglove i senku, a stranica sivu pozadinu.

Česte greške i saveti
  • Bez box-sizing: border-box padding i border povećavaju zadatu širinu.
  • margin: auto centrira samo blok element koji ima širinu (width ili max-width).
  • Linijskim elementima (a, span) width i height ne rade – daj im display: inline-block.
  • Spoljni razmaci (margin) dva bloka jedan iznad drugog se ne sabiraju, nego se uzima veći.

Proveri znanje

Otvori kviz

Box model

1. Koji deo kutije je između sadržaja i okvira?




2. Koliko je široka kutija sa width: 200px, padding: 10px, border: 2px bez border-box?




3. Kako se blok element sa zadatom širinom centrira?




4. Koja vrednost position ostaje na istom mestu ekrana pri skrolovanju?