Vsak HTML element na spletni strani je škatla (box). CSS Box Model opisuje, kako se ta škatla gradi: vsebina (content), notranji odmik (padding), rob (border) in zunanji odmik (margin). Razumevanje Box Modela je ključno za nadzorovanje velikosti in razporeditve elementov.
Lastnosti width in height določajo velikost vsebine, box-sizing pa določa,
ali se vanju vštevajo tudi padding in border. Lastnost overflow rešuje problem, ko vsebina preseže
velikost elementa.
Pozicioniranje (position) določa, kje na strani se element nahaja. Poznamo pet načinov
pozicioniranja: static (privzeto), relative (relativno), absolute (absolutno),
fixed (fiksno) in sticky (lepljivo). Z lastnostjo z-index nadziramo, kateri
element je v ospredju, kadar se elementi prekrivajo.
| Lastnost | Primer | Opis |
|---|---|---|
| Box Model: Velikost | ||
width | width: 300px; |
Določi širino vsebine elementa |
height | height: 200px; |
Določi višino vsebine elementa |
min-width | min-width: 200px; |
Najmanjša dovoljena širina |
max-width | max-width: 100%; |
Največja dovoljena širina |
min-height | min-height: 100px; |
Najmanjša dovoljena višina |
max-height | max-height: 500px; |
Največja dovoljena višina |
box-sizing | box-sizing: border-box; |
Vključi padding in border v skupno širino/višino (priporočeno!) |
| Box Model: Presežena Vsebina | ||
overflow | overflow: hidden; |
Kaj storiti, ko vsebina preseže element (visible, hidden, scroll, auto) |
overflow-x | overflow-x: scroll; |
Presežena vsebina le v vodoravni smeri |
overflow-y | overflow-y: auto; |
Presežena vsebina le v navpični smeri |
| Pozicioniranje (Position) | ||
position: static | position: static; |
Privzeto – element sledi normalnemu toku strani |
position: relative | position: relative; top: 10px; |
Premakne element relativno od njegovega privzetega položaja |
position: absolute | position: absolute; top: 0; right: 0; |
Postavi element glede na najbližjega pozicioniranega prednika |
position: fixed | position: fixed; bottom: 0; |
Prilepi element na okno brskalnika (ne premika se pri scrollu) |
position: sticky | position: sticky; top: 0; |
Kombinacija relative in fixed – lepi se, ko doseže določen položaj |
top / right / bottom / left | top: 20px; left: 50px; |
Določi odmik od robov (deluje samo s position: relative/absolute/fixed/sticky) |
| Zlaganje (Z-Index) | ||
z-index | z-index: 100; |
Določi vrstni red prekrivanja (višja vrednost = bolj v ospredju) |
| Plavanje (Float) | ||
float | float: left; |
Element plava levo ali desno (left, right, none) |
clear | clear: both; |
Prepreči, da bi element plaval ob prejšnjem float elementu |
