Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Junior

CSSda quti modeli nima?

sobes.tech AI

AIdan javob

CSS quti modeli, elementlar qanday qilib sahifada to'g'ri to'rtburchak bloklar sifatida ko'rsatilishini tasvirlaydi. U to'rt ta zonadan yoki qatlamdan iborat bo'lib, ular bir-birining ustiga qo'yiladi, boshlanishi mazmunidan:

  1. Mazmun: Elementning haqiqiy mazmuni joylashgan hudud (matn, rasm va boshqalar). Uning o'lchami width va height xususiyatlari bilan belgilangan.

  2. Padding (Ichki bo'shliq): Mazmun va elementning chegarasi orasidagi shaffof hudud. Bu padding-top, padding-right, padding-bottom, padding-left yoki qisqartma padding bilan sozlanadi.

  3. Chegara (Border): Padding va Mazmunni o'rab turgan chiziq. Uning uslubi, qalinligi va rangi border-width, border-style, border-color yoki border kabi qisqartmalar bilan belgilangan.

  4. Marjin (Tashqi bo'shliq): Elementning chegarasi atrofidagi shaffof hudud, uni boshqa elementlardan ajratadi. Bu margin-top, margin-right, margin-bottom, margin-left yoki margin xususiyatlari bilan sozlanadi. Yaqin bloklarning marjinlari yopishishi mumkin.

Standart xulq, box-sizing: content-box (standart) bilan tasvirlangan, width va height xususiyatlari faqat Mazmunga (Content) tegishli ekanligini belgilaydi. Padding va Border bu o'lchamga qo'shiladi, bu esa elementning umumiy o'lchamini oshiradi.

box-sizing: border-box ishlatilganda, width va height xususiyatlari Mazmun, Padding va Border'ni o'z ichiga oladi. Marjin (margin) har doim elementning umumiy o'lchamiga qo'shiladi, box-sizing'dan qat'i nazar.

Misol:

div {
  width: 100px; /* Mazmun kengligi (content-box uchun) yoki butun elementning kengligi (border-box uchun) */
  height: 50px; /* Mazmun balandligi (content-box uchun) yoki butun elementning balandligi (border-box uchun) */
  padding: 10px; /* Ichki bo'shliq */
  border: 2px solid black; /* Chegara */
  margin: 15px; /* Tashqi bo'shliq */
}

box-sizing qiymatiga qarab, elementning haqiqiy o'lchamlari farq qiladi.

  • box-sizing: content-box: Haqiqiy kenglik = 100px (Mazmun) + 10px (Padding chap) + 10px (Padding o'ng) + 2px (Border chap) + 2px (Border o'ng) = 124px. Haqiqiy balandlik = 50px (Mazmun) + 10px (Padding yuqori) + 10px (Padding past) + 2px (Border yuqori) + 2px (Border past) = 74px.
  • box-sizing: border-box: Haqiqiy kenglik = 100px (Mazmun + Padding + Border). Haqiqiy balandlik = 50px (Mazmun + Padding + Border).

Tashqi marjin margin: 15px bu umumiy o'lcham atrofida qo'shiladi.

OldingiKeyingi