Model css kutije

Model okvira u CSS -u opisuje okvire koji su generirani iz HTML elemenata. Predložak okvira također sadrži detaljne opcije za postavljanje margina, obruba, paddinga i sadržaja za svaki element. Sljedeća slika prikazuje kako je model kutije izgrađen.
Model okvira ili "model kutije" zasigurno je najvažnija značajka jezika CSS stilskog lista, jer uvjetuje dizajn svih web stranica. Model okvira je ponašanje CSS -a koje uzrokuje da svi elementi na stranicama budu predstavljeni pravokutnim okvirima.
Okviri od jedne stranice stvaraju se automatski. Svaki put kada se umetne HTML oznaka, stvara se novi pravokutni okvir koji obuhvaća sadržaj tog elementa. Sljedeća slika prikazuje tri pravokutna okvira koji stvaraju tri HTML oznake koje stranica sadrži.

U stvarnosti su svi elementi web stranice (odlomci, veze, slike, tablice itd.) Pravokutni okviri. Preglednici postavljaju ove okvire na način na koji smo ih označili za postavljanje stranice.
Postoje dvije vrste kutija: blok i inline. Blok elementi prekidaju tok izgleda. Odnosno, pojavljuju se sami, unoseći "prijelome redova". Ugrađeni elementi prate tok i nalaze se unutar blok elemenata.
Na primjer, odlomak bi bio blok element (ne možemo imati odlomak pored drugog, ali dva odlomka u nizu pojavit će se jedan ispod drugog. S druge strane, veza je umetnuti element jer ne sadrži "izrezati" tekst gdje se nalazi.
Dijelovi koji čine svaku kutiju i njihov redoslijed prikaza sa stajališta korisnika su sljedeći:
Sadržaj (sadržaj): to je HTML sadržaj elementa (riječi u odlomku, slika, tekst na popisu elemenata itd.)
Punjenje: Izborni slobodni prostor između sadržaja i ruba.
Granica: redak koji potpuno obuhvaća sadržaj i njegovo podmetanje.
Pozadinska slika: Slika se prikazuje iza sadržaja i prostora za dodavanje.
Boja pozadine: boja prikazana iza sadržaja i prostora za dodavanje.
Margin (margin): izborno odvajanje kutije od ostalih susjednih kutija.
Uložak i margina su prozirni, pa prostor koji zauzima padding prikazuje boju pozadine ili sliku (ako je definirana), a prostor koji zauzima margina prikazuje boju pozadine ili sliku vašeg elementa roditelja (ako je definirano). Ako nijedan roditeljski element nema definiranu boju pozadine ili sliku, prikazuje se boja pozadine ili slika stranice (ako je definirana).
Ako okvir definira i boju i pozadinsku sliku, slika ima veći prioritet i ona se prikazuje. Međutim, ako pozadinska slika ne pokriva u potpunosti okvir stavke ili ako slika ima prozirna područja, prikazuje se i boja pozadine. Kombinacijom prozirnih slika i boja pozadine mogu se postići vrlo zanimljivi grafički efekti.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod