Cuprins
Modelul de cutie din CSS descrie casetele care sunt generate din elemente HTML. Șablonul de casetă conține, de asemenea, opțiuni detaliate pentru setarea marginilor, a chenarelor, a umplerii și a conținutului pentru fiecare element. Următoarea imagine arată cum este construit modelul cutiei.Modelul cutiei sau „modelul cutiei” este cu siguranță cea mai importantă caracteristică a limbajului de tip CSS, deoarece condiționează proiectarea tuturor paginilor web. Modelul casetei este comportamentul CSS care face ca toate elementele de pe pagini să fie reprezentate prin casete dreptunghiulare.
Casetele de o pagină sunt create automat. De fiecare dată când se introduce o etichetă HTML, se creează o nouă casetă dreptunghiulară care cuprinde conținutul acelui element. Următoarea imagine prezintă cele trei casete dreptunghiulare care creează cele trei etichete HTML pe care le include pagina.
Există două tipuri de cutii: bloc și în linie. Elementele blocului întrerup fluxul de aspect. Adică apar singuri, inserând „întreruperi de linie”. Elementele în linie urmează fluxul și sunt conținute în elemente de bloc.
De exemplu, un paragraf ar fi un element bloc (nu putem avea un paragraf lângă celălalt, dar două paragrafe la rând vor apărea unul sub celălalt. Pe de altă parte, o legătură este un element în linie, deoarece nu are „tăiați” textul unde este.
Părțile care alcătuiesc fiecare cutie și ordinea lor de afișare din punctul de vedere al utilizatorului sunt următoarele:
Conținut (conținut): este conținutul HTML al elementului (cuvintele dintr-un paragraf, o imagine, textul dintr-o listă de elemente etc.)
Garnitura: Spațiu liber opțional între conținut și margine.
Frontieră: linie care cuprinde complet conținutul și căptușeala acestuia.
Imagine de fundal: Imagine afișată în spatele conținutului și a spațiului de umplere.
Culoare de fundal: culoare afișată în spatele conținutului și a spațiului de umplere.
Marja (margine): separare opțională între casetă și celelalte casete adiacente.
Completarea și marginea sunt transparente, astfel încât spațiul ocupat de padding arată culoarea de fundal sau imaginea (dacă este definită), iar spațiul ocupat de margine arată culoarea de fundal sau imaginea părintelui elementului dvs. (dacă este definită). Dacă niciun element părinte nu are o culoare de fundal sau o imagine definită, se afișează culoarea sau imaginea de fundal a paginii (dacă este definită).
Dacă o casetă definește atât o culoare cât și o imagine de fundal, imaginea are prioritate mai mare și este cea care este afișată. Cu toate acestea, dacă imaginea de fundal nu acoperă complet caseta de element sau dacă imaginea are zone transparente, se afișează și culoarea de fundal. Combinând imagini transparente și culori de fundal, se pot obține efecte grafice foarte interesante.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
