CSS Model za početnike

Svaki početnik prvo treba da počne sa osnovama. U slučaju CSS-a, osnove uče box model. Pre nego što nastavite sa učenjem bilo kog drugog CSS koncepta, ovaj bi trebalo prvo da savladate!

Bok model je osnovni gradivni element CSS-a. Box model je osnovni gradivni element CSS-a.

To obično dovodi do zabune kod početnih programera, pa je sada trenutak da se rekord postavi ispravno. Ovde ćete naučiti sve osnovne elemente box modela i kako su svi povezani.

Pre nego što zaronimo dublje, svi treba da shvate da je svaki element veb dizajna pravougaona kutija. Verovatno ste ovo čuli više puta, ali ovo je važan koncept kojeg bi svaki programer trebao biti svestan.

Sada, objasnimo misteriozni box model!

Struktura box modela

Kao što je gore pomenuto, strukturu box modela čine:

Content (height i width),
Padding,
Border,
Margin.

To su svi elementi koji su pregledaču potrebni da bi prikazao box model. Srećom, sa CSS-om možemo da kontrolišemo svakog od njih pojedinačno. Da vidimo kako.

U ovom članku ćemo koristiti sledeći kod i dodavati ga postepeno.

HTML

<div class=”box”>Lorem ipsum dolor amet whatever woke cronut, farm-to-table church-key tousled edison bulb. </div>

CSS

.box {
  background-color: hotpink;
  color: #fff;
}

Sadržaj

Sadržaj je prilično jasan. Sadržaj našeg elementa ima određenu širinu i visinu. Fiksna visina i širina mogu se podesiti pomoću visine i širine CSS svojstava ili ih može odrediti sam sadržaj.

Jedina stvar koja je ovde pomalo zbunjujuća je upotreba ugrađenih elemenata ili elemenata bloka.

Korištenje ugrađenih elemenata i elemenata bloka

Da biste osvežili memoriju, razlika između ugrađenih i blokovskih elemenata je činjenica da blok elementi zauzimaju 100% širine kontejnera, dok ugrađeni elementi zauzimaju samo onu količinu prostora koja je potrebna sadržaju.

Kada koristite ugrađene elemente, nije moguće postaviti fiksnu širinu ili visinu za taj element, jer element nema unapred određenu širinu i visinu (jer širinu i visinu određuje sadržaj). To se može prevazići pretvaranjem elementa u blok element.

Za razliku od ugrađenih elemenata, kada koristite elemente na nivou bloka, za njih lako možete postaviti fiksnu širinu ili visinu. S obzirom na to da elementi na nivou bloka po defaultu zauzimaju 100% širine kontejnera, lako ga možemo nadjačati postavljanjem fiksne širine.

Takođe možete prekrivati svoj element u ugrađeni blok. Kada se koristi ugrađeni blok, element ima ponašanje ugrađenog elementa (zauzima samo prostor sadržaja), **ali njime možete manipulisati na isti način kao što to možete učiniti sa elementom bloka.
**

Sada kada imamo element na nivou bloka možemo mu dati širinu i visinu.

CSS

.box {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
}

Rezultat

Padding

Dalje, dodaćemo padding u naš okvir.

Padding definiše razmak između sadržaja i ivice okvira.

Da vidimo na delu na našem primeru.

CSS

.box {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
  padding: 10px;
}

Rezultat:

Na slici vidimo kako padding utiče na ukupan izgled kutije. Između sadržaja i ivice okvira na sve četiri strane ima 10 piksela. Takođe možemo dodati padding na svaku stranu pojedinačno, koristeći padding-top,padding-bottom, padding-left, padding-right.

Border

Budući da idemo iznutra ka unutra, sledeći korak bi bio definisanje granice. Granica okružuje sadržaj i ne morate da je koristite, ali i dalje postoji. To samo znači da granica ima širinu nula.

Sada ćemo našem primeru dodati ivicu.

CSS

.box {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
  padding: 10px;
  border: solid 3px black;
}

Margina

Konačni aspekt modela kutija je margina. Kao što neki od vas znaju, margina je prostor izvan granice. To je prostor između elemenata.

Najbolji način da se to demonstrira na praktičnom primeru je da vam pokaže kako su dva elementa pozicionirana sa i bez margina.

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
  padding: 10px;
  border: solid 3px black;
  margin: 0
}

U ovom primeru vidimo kako se bez margine dva elementa drže zajedno i između njih nema razmaka.

Sada, dodajmo margine.

CSS

.box {
  margin: 20px;
}

Ovo izgleda bolje. Dodali smo malo razmaka između kutija. Takođe možemo dodati prostor sa svake strane elementa pojedinačno koristeći margin-top, margin-bottom, margin-left ili margin-right.

Rezime

Došli ste do kraja ovog članka, čestitamo! :)
Pa, šta smo naučili?

1. Svaki element na veb stranici je u osnovi okvir.
2. Aspekti box modela su sadržaj, padding, ivice i margine.
3. Kada koristite ugrađeni element, ne možete da postavite fiksnu širinu ili visinu za taj element, dok je to moguće sa elementom blok i ugrađenim blok elementom.

Nadam se da vam je ovo pomoglo da naučite nešto novo ili vam je osvežilo pamćenje.

Pratite nas, jer ćemo u sledećem članku govoriti o još jednom veoma važnom svojstvu koje vam pomaže da izračunate širinu box modela, svojstvo box-sizing.

Hvala za čitanje!