Model CSS okvira koji je objasnio život u dosadnom prigradskom naselju

Ako ste bili u normalnom prigradskom naselju, tada možete razumjeti CSS Box Model.

Iskusni napredni web programer reći će vam da je HTML izgled zaista samo niz okvira. Te se kutije međusobno snose unutar njihovih spremnika, a one se međusobno snose još u većoj kutiji kontejnera, a zatim ...

WOW. To je puno kutija unutar kutija. Mislim da bar tjedan dana ne želim čuti riječ "okvir". Također, koncept okvira ne opisuje margine i obloge. To su dva najveća alata za stvaranje ravnomjerno raspoređenih elemenata.

U stvarnosti, postoji malo više nijanse kada je u pitanju uređenje HTML elemenata. CSS Box (gasp!) Model omogućava nam stvaranje dobro uravnoteženog i lako čitljivog sadržaja na našoj stranici.

Različiti dijelovi modela kutije nalikuju imanju u tipičnom predgrađu stanogradnje. Ako ih možete pravilno koristiti, možete izbjeći sate suđenja i pogreške sa istrošenim CSS-om.

Ako tražite više tehničko objašnjenje, MDN ima prilično dobro.

Glavni dijelovi modela kutije

Postoji pet važnih svojstava koja vam omogućuju veličinu i distribuciju HTML elemenata:

  • Širina
  • Visina
  • punjenje
  • Granica
  • Margina

Evo kako to izgleda na dijagramu:

Jao! To je način previše kutija za jedan element. Vratimo se ovom koraku Ovdje su zapravo tri različite zone.

Zona 1: Visina i širina stvarnog elementa. Ovo je sama kuća. U dijagramu je to 679 piksela za 63 piksela.

Zona 2: Teritorij oko elementa koji je ograničen granicom. Ovo je poput dvorišta i ograde na vašem imanju. Ovo je obloga i obrub.

Zona 3: prazan prostor koji ovaj element odvaja od okolnih elemenata. To je slično stablima koja su tehnički još uvijek dio vašeg posjeda, ali pružaju malo privatnosti od susjeda i samo su vam namijenjena za odlaganje. Ovo je marža.

Zapamtite da svaki div, odlomak i zaglavlje imaju ta svojstva. Može se zbuniti prilično brzo ako imate niz elemenata naslaganih jedan na drugom, a nemate pojma koji elementi sadrže međuspremnički prostor.

Razlika između marže i obloga je možda najizazovniji dio. Njih dvije se koriste iz različitih razloga. Kao što možete vidjeti sa zelenom travom, padding će i dalje imati boju pozadine, ako je odlučite postaviti. Ovo je također svojstvo koje želite promijeniti ako želite promijeniti udaljenost između granice i sadržaja.

Recimo da želite imati masivno dvorište na desnoj strani kuće, što bi učinilo pravu granicu daleko. To možete promijeniti sa svojstvom desne obloge.

Svojstvo margine utječe na prostor između elemenata. To je onaj prazan prostor koji je vrsta "ničije zemlje" u kojoj se ne događa razvoj. Strogo je namijenjen za razmaknute elemente. Evo nekoliko kuća u nizu, od kojih neke imaju veće ili manje margine.

NAPOMENA: Svaka od ovih složenih kuća mora imati zaslon s vrijednošću "inline-block". Sprječava propadanje marže.

Neki stvarni primjeri

U redu, koristimo neki pravi CSS! Zamislite da imate puno sa sljedećim atributima:

Evo kako bi to moglo izgledati:

Par zapažanja:

  1. Zapazite kako boja pozadine utječe samo na piksele unutar obruba. Margine ne utječu na ovo svojstvo
  2. Kad izjavite margin i padding s jednom vrijednošću, poput 4px, CSS automatski primjenjuje broj na gornji, donji, lijevi i desni dio elementa.

Evo posljednjeg primjera. U ovom ćemo poslužiti dvije vrijednosti prilikom deklariranja padding-a i marže. Prva vrijednost određuje gornju / donju, a druga vrijednost lijevu / desnu vrijednost.

A evo dijagrama:

Ako ste uživali u ovom postu, možda ćete uživati ​​i u mojim drugim objašnjenjima izazovne CSS, JavaScript i SQL teme, kao što su pozicioniranje, Model-View-Controller i povratne informacije.

A ako mislite da bi ovo moglo pomoći drugim ljudima u istom položaju kao i vi, dajte mu "srce"!