Qutu modeli nədir, nədən ibarətdir və hansı növləri…

CSS Qutu Modeli (Box Model) — veb səhifədə HTML elementlərinin düzbucaqlı bloklar şəklində necə təqdim olunduğunu təsvir edən abstrakt varlıqdır. Bu, elementin ölçülərini və yerləşməsini, daxili boşluqları, sərhədləri və xarici boşluqları müəyyən edir.

Qutu modeli aşağıdakı hissələrdən ibarətdir:

Məzmun: Elementin məzmunu (mətn, şəkillər və s.). Onun ölçüsü width və height xüsusiyyətləri ilə müəyyən edilir.
Padding: Elementin məzmunu ilə sərhədi arasındakı boşluq. padding-top, padding-right, padding-bottom, padding-left və ya qısaldılmış padding xüsusiyyəti ilə təyin edilir.
Sərhəd (Border): Daxili boşluq və məzmun ətrafındakı sərhəd. border-width, border-style, border-color və ya qısaldılmış border xüsusiyyəti ilə təyin edilir.
Kənar (Margin): Elementin sərhədi ilə xarici elementlər arasındakı boşluq. margin-top, margin-right, margin-bottom, margin-left və ya qısaldılmış margin xüsusiyyəti ilə təyin edilir.

İki əsas qutu modeli mövcuddur, bunlar box-sizing xüsusiyyəti ilə müəyyən edilir:

content-box (standart dəyər): Elementin eni və hündürlüyü, width və height xüsusiyyətləri ilə təyin edilir, yalnız məzmun sahəsinə aiddir. Padding və Border bu ölçülərə əlavə olunur, elementin ümumi ölçüsünü artırır.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Ümumi ölçüyə 20px əlavə edir */
  border: 2px solid black; /* Ümumi ölçüyə 4px əlavə edir */
  box-sizing: content-box; /* Standart davranış */
}
/* Elementin ümumi ölçüsü 124px x 124px olacaq */

border-box: Elementin eni və hündürlüyü, width və height xüsusiyyətləri ilə təyin edilir, məzmunu, padding və border daxil edir. Padding və Border ümumi ölçünü artırmır, əksinə, "sıxışdırır" məzmun sahəsini.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Ümumi eni/hündürlüyə daxil edilir */
  border: 2px solid black; /* Ümumi eni/hündürlüyə daxil edilir */
  box-sizing: border-box;
}
/* Elementin ümumi ölçüsü 100px x 100px olacaq */

border-box daha çox istifadə olunur, çünki padding və border əlavə olunduqda ölçülərin daha əvvəlcədən bilinə bilməsini təmin edir. Bu, məsələn, cavabdeh dizaynların yaradılmasında, elementlərin müəyyən faiz genişlikdə olması lazım olduqda çox faydalıdır.

Qutu modeli nədir, nədən ibarətdir və hansı növləri mövcuddur?