Mi az a dobozmodell, miből áll és milyen típusai…

A CSS Box Model (Doboz Modell) egy absztrakt entitás, amely leírja, hogy a HTML elemek hogyan jelennek meg az oldalon téglalap alakú blokkokként. Meghatározza a tartalom, a belső margók, a keretek és a külső margók méretét és elhelyezkedését.

A doboz modell a következő részekből áll:

Tartalom: Az elem tartalma (szöveg, képek stb.). Méretét a width és height tulajdonságok határozzák meg.
Padding (Belső margó): A tér az elem tartalma és a keret között. A padding-top, padding-right, padding-bottom, padding-left vagy a padding rövid tulajdonság határozza meg.
Border (Keretszél): A belső margó és a tartalom körüli keret. A border-width, border-style, border-color vagy a border rövid tulajdonság határozza meg.
Margin (Külső margó): A tér az elem kerete és a külső elemek között. A margin-top, margin-right, margin-bottom, margin-left vagy a margin rövid tulajdonság határozza meg.

Két fő típusú dobozmodell létezik, amelyeket a box-sizing tulajdonság határoz meg:

content-box (alapértelmezett érték): Az elem szélessége és magassága, amelyet a width és height határoz meg, csak a tartalom területére vonatkozik. A padding és a border hozzáadódik ezekhez a méretekhez, növelve az elem összméretét.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* 20px-t ad hozzá az összmérethez minden tengelyen */
  border: 2px solid black; /* 4px-t ad hozzá az összmérethez minden tengelyen */
  box-sizing: content-box; /* Alapértelmezett viselkedés */
}
/* Az elem összmérete 124px x 124px lesz */

border-box: Az elem szélessége és magassága, amelyet a width és height határoz meg, tartalmazza a tartalmat, a paddingot és a border-t. A padding és a border nem növelik az összméretet, hanem "összenyomják" a tartalom területét.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Beleértve az össz szélesség/magasságba */
  border: 2px solid black; /* Beleértve az össz szélesség/magasságba */
  box-sizing: border-box;
}
/* Az elem összmérete 100px x 100px lesz */

Gyakrabban használják a border-box-t, mert előre jelezhetőbbé teszi az elemek méretét padding és border hozzáadásakor. Ez például hasznos, amikor reszponzív elrendezéseket készítünk, ahol az elemeknek meghatározott százalékos szélességet kell foglalniuk.

Mi az a dobozmodell, miből áll és milyen típusai vannak?