de Kevin Kononenko

Dacă ați fost într-un cartier suburban normal, atunci puteți înțelege modelul CSS Box.

Un dezvoltator web cu experiență front-end vă va spune că un aspect HTML este într-adevăr doar o serie de cutii. Aceste cutii se stivuiesc una peste cealaltă în cutiile lor de containere și acele cutii de containere se stivuiesc una peste cealaltă într-o cutie de containere chiar mai mare și apoi …

WOW. Aceasta este o mulțime de cutii în cutii. Nu cred că vreau să aud cuvântul „cutie” timp de cel puțin o săptămână. De asemenea, conceptul cutiei nu face o treabă bună de a descrie marginile și umplerea. Acestea sunt cele mai mari două instrumente pentru crearea de elemente distanțate uniform.

În realitate, există un pic mai multe nuanțe atunci când vine vorba de aranjarea elementelor HTML. Modelul CSS Box (gasp!) Ne permite să creăm conținut bine echilibrat și ușor de citit pe pagina noastră.

Diferitele piese ale modelului cutiei sunt cam ca o proprietate într-o amenajare tipică de locuințe suburbane. Și dacă le puteți utiliza corect, puteți evita ore întregi de încercări și erori cu CSS fussy.

Dacă sunteți în căutarea unei explicații mai tehnice, MDN are o destul de bun.

ad-banner

Principalele piese ale modelului cutiei

Există 5 proprietăți importante care vă permit să vă dimensionați și să distribuiți elementele HTML:

  • Lăţime
  • Înălţime
  • Căptușeală
  • Frontieră
  • Marja

Iată cum arată într-o diagramă:

Modelul CSS Box explicat prin a locui intr un cartier suburban

Yikes! Acesta este un mod prea mult de cutii pentru un singur element. Să facem acest lucru înapoi cu un pas. Există de fapt trei zone diferite aici.

Zona 1: Înălțimea și lățimea elementului real. Aceasta este casa în sine. În diagramă, acesta este de 679 pixeli pe 63 pixeli.

Zona 2: Teritoriul din jurul elementului care este limitat de graniță. Este un fel de curte și gard de pe proprietatea dvs. Acesta este căptușeală și frontieră.

1611519724 154 Modelul CSS Box explicat prin a locui intr un cartier suburban

Zona 3: Spațiul gol care separă acest element de elementele înconjurătoare. Acest lucru este similar cu copacii care fac încă parte din punct de vedere tehnic al proprietății dvs., dar vă oferă o anumită intimitate din partea vecinilor și sunt meniți doar să vă ofere un tampon. Acesta este marjă.

1611519725 973 Modelul CSS Box explicat prin a locui intr un cartier suburban

Amintiți-vă că fiecare div, paragraf și antet are aceste proprietăți. Se poate confunda destul de repede atunci când aveți o serie de elemente stivuite una peste alta și nu aveți nicio idee despre ce elemente conțin spațiul tampon.

Diferența dintre margine și căptușeală este probabil partea cea mai provocatoare. Cele două sunt utilizate din motive diferite. După cum puteți vedea cu iarba verde, căptușeala va avea în continuare o culoare de fundal, dacă alegeți să o setați. Aceasta este, de asemenea, proprietatea pe care doriți să o modificați dacă doriți să modificați distanța dintre frontieră si conţinut.

Să presupunem că doriți să aveți o curte masivă pe partea dreaptă a casei, care ar face granița dreaptă departe. Puteți schimba acest lucru cu umplutură-dreapta proprietate.

1611519726 964 Modelul CSS Box explicat prin a locui intr un cartier suburban

marjă proprietatea afectează spațiul dintre elemente. Acesta este acel spațiu gol care este un fel de „pământ al nimănui” în care nu are loc nicio dezvoltare. Este strict destinat distanțării elementelor. Iată câteva case la rând, dintre care unele au margini mai mari sau mai mici.

1611519726 287 Modelul CSS Box explicat prin a locui intr un cartier suburban

NOTĂ: Fiecare dintre aceste case suprapuse trebuie să aibă un afișaj cu valoarea „inline-block”. Previne prăbușirea marjei.

Câteva exemple reale

Bine, să folosim niște CSS reale! Imaginați-vă că aveți multe cu următoarele atribute:

Iată cum ar arăta asta:

1611519727 520 Modelul CSS Box explicat prin a locui intr un cartier suburban

Câteva observații:

  1. Observați cum culoarea de fundal afectează numai pixelii din interiorul chenarului. Marjele nu sunt afectate de această proprietate
  2. Când declarați marja și umplerea cu o valoare, cum ar fi 4px, CSS aplică automat numărul în partea de sus, jos, stânga și dreapta elementului.

Iată un ultim exemplu. În aceasta, vom folosi două valori atunci când declarăm padding și margin. Prima valoare determină partea superioară / inferioară, iar a doua valoare determină valoarea stângă / dreapta.

Iată diagrama:

1611519727 831 Modelul CSS Box explicat prin a locui intr un cartier suburban

Dacă ți-a plăcut această postare, s-ar putea să te bucuri și de mine alte explicații de subiecte provocatoare CSS, JavaScript și SQL, cum ar fi poziționarea, Model-View-Controller și apeluri de apel.

Și dacă credeți că acest lucru ar putea ajuta alte persoane în aceeași poziție ca dvs., acordați-i o „inimă”!