CSS-də blok modeli nədir?

CSS-də qutu modeli hər element üçün yaradılan düzbucaqlı sahəni təsvir edir və onun ölçülərinin və yerləşməsinin hesablanmasında istifadə olunur. Bu, dörd hissədən ibarətdir:

• Məzmun qutusu: Elementin məzmununun (mətn, şəkil və s.) göstərildiyi sahə. Ölçüsü width və height xüsusiyyətləri ilə müəyyən edilir.
• Padding qutusu: Məzmun sərhədinin və element sərhədinin arasındakı boşluq. Ölçüsü padding xüsusiyyəti ilə müəyyən edilir. Elementin fon rəngi və şəkli bu sahəyə yayılır.
• Sərhəd qutusu: Elementin sərhədi, padding qutusunu əhatə edir. Ölçüsü border xüsusiyyətləri ilə müəyyən edilir.
• Marjin qutusu: Elementin sərhədinin ətrafındakı boşluq, onu digər elementlərdən ayırır. Ölçüsü margin xüsusiyyəti ilə müəyyən edilir. Bu sahə həmişə tam şəffafdır.

Varsayılan olaraq, elementin ölçüsü aşağıdakı kimi hesablanır:

eni = width + padding-left + padding-right + border-left-width + border-right-width
hündürlük = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing xüsusiyyəti bu modeli dəyişdirməyə imkan verir:

• content-box (varsayılan): width və height ölçüləri yalnız məzmun qutusuna aiddir.
• border-box: width və height ölçüləri padding və sərhədi daxil edir.

.element-default {
  width: 100px; /* Məzmun qutusunun eni = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Əsl element eni: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Əsl element eni = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Məzmun qutusunun eni: 100 - 10 - 10 - 5 - 5 = 70px */
}