7-dars

O'zing nomla

Bu darsda Box model nima ekanligini va qanday ishlashini, shuningdek box-sizing property'sini o'rganamiz.

1. Box model nima?

Matn bo'ladimi, tugma bo'ladimi, rasm bo'ladimi — brauzer ularni quti sifatida ko'radi.

Agar box model'ni tushunmasang:

• nega element sig'mayapti
• nega yonidan chiqib ketdi
• nega joylashuv buzildi

— bularning barchasi mavhum bo'lib qoladi.

🧠 Box model nimani anglatadi?

Box model — elementning joy egallash formulasi.

Har bir element 4 qismdan iborat:

margin
 └─ border
     └─ padding
         └─ content

Brauzer elementni shunday hisoblaydi.

1️⃣ Content — ichki qism

Bu:

• matn
• rasm
• video
• input ichidagi qiymat

Misol 👇

div {
  width: 200px;
  height: 100px;
}

👉 Bu faqat content o'lchami.

2️⃣ Padding — content atrofidagi havo

Padding:

• content bilan border orasidagi masofa
• elementga "nafas beradi"

Misol 👇

div {
  padding: 20px;
}

👉 Padding elementni kattalashtiradi

3️⃣ Border — quti devori

Border:

• element chegarasi
• o'lchamga real ta'sir qiladi

Misol 👇

div {
  border: 5px solid black;
}

👉 Border ham joy egallaydi.

4️⃣ Margin — tashqi masofa

Margin:

• boshqa elementlardan uzoqlik uchun
• elementga emas, atrofga ta'sir qiladi

Misol 👇

div {
  margin: 20px;
}

👉 Margin qutining tashqarisida.

⚠️ Eng muhim nuqta

Agar yozsang:

div {
  width: 200px;
  padding: 20px;
  border: 10px solid;
}

👉 Brauzer hisoblaydi:

content: 200
padding: 40 (20 + 20)
border: 20 (10 + 10)
-------------------
JAMI: 260px

❗ width = elementning umumiy eni emas ❗ bu eng ko'p uchraydigan CSS xato

2. box-sizing nima?

🧠 box-sizing nimani boshqaradi?

box-sizing — brauzerga shuni aytadi:

"width va height qaysi qismga tegishli bo'lsin?"

Ya'ni:

• faqat contentmi?
• yoki content + padding + bordermi?

🧱 Default holat: content-box

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid;
  box-sizing: content-box;
}

👉 Bu default (agar yozmasang ham shunaqa).

Brauzer hisoblaydi:

content: 200
padding: 40
border: 20
----------------
JAMI: 260px

❗ width = faqat content ❗ Padding va border ustiga qo'shiladi

🧠 Muammo qayerda?

Sen 200px deb o'ylaysan, brauzer 260px qiladi.

📦 Alternativa: border-box

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid;
  box-sizing: border-box;
}

Brauzer hisoblaydi:

JAMI: 200px
(content ichkarida qisqaradi)

👉 Endi:

• width = elementning real eni
• padding va border ichkariga siqiladi

⚖️ Vizual farq

content-box

[ padding | content(200) | padding ] + border
→ katta bo'lib ketadi

border-box

[ border + padding + content ] = 200
→ nazorat oson

✅ Nega border-box ishlatiladi?

Sabablari juda muhim:

• Layout oldindan aytib bo'ladigan bo'ladi
• "Nega sig'madi?" muammosi yo'qoladi
• Grid / Flex bilan ideal mos keladi
• Dizayn o'lchamlari real hayotga mos

Shuning uchun professional loyihalarda har doim:

*,
*::before,
*::after {
  box-sizing: border-box;
}

🧠 Bu — "CSS reset" emas, layoutni barqaror qilish.

❌ Qachon content-box kerak bo'lishi mumkin?

Kam hollarda:

• matematik hisoblash kerak bo'lsa
• maxsus animatsiya / formula bo'lsa

99% holatda — kerak emas.

📌 Xulosa

• box-sizing — width nimani anglatishini belgilaydi
• content-box → default, lekin xavfli
• border-box → professional tanlov
• Real layout = border-box