Quti model, nima, nima tashkil etilgan va uning…

CSS Box Model (Quti Modeli) — bu abstrakt ob'ekt bo'lib, u HTML elementlarining sahifada qanday qilib to'g'ri to'rtburchak bloklar shaklida tasvirlanganligini tavsiflaydi. U elementning hajmi va joylashishini, ichki bo'shliq, chegaralar va tashqi bo'shliqni belgilaydi.

Quti modeli quyidagi qismlardan iborat:

Kontent: Elementning mazmuni (matn, rasm va boshqalar). Uning o'lchami width va height xususiyatlari bilan belgilangan.
Padding: Element mazmuni va uning chegarasi o'rtasidagi bo'shliq. padding-top, padding-right, padding-bottom, padding-left yoki qisqacha padding xususiyatlari bilan belgilangan.
Border: Ichki bo'shliq va mazmun atrofidagi chegaralar. border-width, border-style, border-color yoki qisqacha border xususiyatlari bilan belgilangan.
Margin: Element chegarasi va tashqi elementlar o'rtasidagi bo'shliq. margin-top, margin-right, margin-bottom, margin-left yoki qisqacha margin xususiyatlari bilan belgilangan.

Ikki asosiy quti modeli turi mavjud, ular box-sizing xususiyati bilan belgilangan:

content-box (standart qiymat): Elementning kengligi va balandligi, width va height xususiyatlari bilan belgilangan, faqat mazmun maydoniga taalluqlidir. Padding va Border bu o'lchamlarga qo'shiladi, elementning umumiy o'lchamini oshiradi.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Umumiy o'lchamga 20px qo'shadi */
  border: 2px solid black; /* Umumiy o'lchamga 4px qo'shadi */
  box-sizing: content-box; /* Standart xulq */
}
/* Elementning umumiy o'lchami 124px x 124px bo'ladi */

border-box: Elementning kengligi va balandligi, width va height xususiyatlari bilan belgilangan, mazmun, padding va borderni o'z ichiga oladi. Padding va Border umumiy o'lchamni oshirmaydi, balki mazmun maydonini siqadi.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Umumiy kenglik/balandlikka kiritilgan */
  border: 2px solid black; /* Umumiy kenglik/balandlikka kiritilgan */
  box-sizing: border-box;
}
/* Elementning umumiy o'lchami 100px x 100px bo'ladi */

Ko'proq border-box ishlatiladi, chunki padding va border qo'shilganda o'lchamlarning oldindan bilinishini ta'minlaydi. Bu, masalan, responsiv dizaynlar yaratishda, elementlar ma'lum foiz kenglikda bo'lishi kerak bo'lsa, juda qulaydir.

Quti model, nima, nima tashkil etilgan va uning turlari qanday?