CSS

Box model

CSS'ning eng muhim tushunchasi — Box Model (quti modeli). Brauzer uchun sahifadagi har bir element — matn, rasm, tugma yoki div — bu to'rtburchak quti. Bu qutining o'lchami va uning ichki/tashqi bo'shliqlarini qanday hisoblashini tushunmasangiz, CSS'da joylashuv har doim sirli tuyuladi. Bu darsda quti modelini to'liq o'zlashtiramiz.

Maslahat: brauzerda F12 tugmasini bosib Developer Toolsni oching, biror elementni tanlang va o'ng tomonda "Box Model" diagrammasini ko'ring. U content, padding, border, margin qatlamlarini rangli ko'rsatadi — bu tushunishga juda yordam beradi.

Quti to'rtta qatlamdan iborat

Har bir element — ichkaridan tashqariga qarab — to'rtta qatlamdan tashkil topgan quti:

  1. Content (mazmun) — markazdagi haqiqiy mazmun: matn, rasm. Uning o'lchami width va height bilan belgilanadi;
  2. Padding (ichki bo'shliq) — mazmun bilan chegara orasidagi bo'shliq. Element fonining rangi shu qatlamgacha yoyiladi;
  3. Border (chegara) — qutini o'rab turadigan ramka (chiziq);
  4. Margin (tashqi bo'shliq) — qutining tashqi chegarasi bilan qo'shni elementlar orasidagi bo'shliq. U doim shaffof.
  +-----------------------------+  <- margin (tashqi)
  |  +-----------------------+  |  <- border (chegara)
  |  |  +-----------------+  |  |  <- padding (ichki)
  |  |  |    CONTENT      |  |  |  <- mazmun (width x height)
  |  |  +-----------------+  |  |
  |  +-----------------------+  |
  +-----------------------------+

Padding — ichki bo'shliq

padding mazmun bilan element chegarasi orasiga bo'shliq qo'shadi. Uni har tomon uchun alohida yoki birdaniga belgilash mumkin.

/* Barcha tomondan bir xil */
.karta { padding: 20px; }

/* Yuqori-past 10px, o'ng-chap 30px */
.karta { padding: 10px 30px; }

/* Yuqori, o'ng, past, chap (soat mili bo'yicha) */
.karta { padding: 10px 20px 30px 40px; }

/* Faqat bitta tomon */
.karta { padding-left: 15px; }
To'rtta qiymat berilganda tartib doim soat mili bo'yicha: yuqori (top) → o'ng (right) → past (bottom) → chap (left). Buni eslab qolish uchun "TRBL" (yoki "trouble") deb yodlash mumkin.

Border — chegara

border element atrofida chiziq (ramka) chizadi. U uchta qismdan iborat: qalinlik, uslub va rang.

/* qalinlik | uslub | rang */
.quti {
  border: 2px solid black;
}

/* Faqat pastki chegara */
.sarlavha {
  border-bottom: 3px dashed red;
}

Margin — tashqi bo'shliq

margin elementni qo'shni elementlardan uzoqlashtiradi. Uning sintaksisi padding bilan bir xil (bir, ikki yoki to'rt qiymat).

.blok {
  margin: 20px;
  margin-top: 40px;
}

Elementni gorizontal markazga qo'yishning mashhur usuli — chap va o'ng margin'ni auto qilish. Buning uchun elementning widthi belgilangan bo'lishi kerak:

.markaz {
  width: 600px;
  margin: 0 auto;
}
Margin collapse (margin yig'ilishi): agar ikki blok element yuqori-pastma-past joylashsa va biri pastki margin, ikkinchisi yuqori marginga ega bo'lsa, ular qo'shilmaydi — kattarog'i g'olib chiqadi. Masalan 30px va 20px margin uchrashsa, orada 50px emas, 30px bo'shliq qoladi. Bu boshlang'ich dasturchilarni ko'p chalkashtiradi.

width, height va box-sizing muammosi

width va height odatda faqat content qatlamining o'lchamini belgilaydi. Bu jiddiy muammoga olib keladi. Quyidagi qutini ko'ring:

.quti {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Siz "quti kengligi 200px" deb o'ylaysiz, lekin brauzer standart holatda uni shunday hisoblaydi: 200 (content) + 20 (chap padding) + 20 (o'ng padding) + 5 (chap border) + 5 (o'ng border) = 250px. Ya'ni haqiqiy quti siz kutgandan kengroq bo'lib qoladi va joylashuvni buzadi.

Yechim: box-sizing: border-box

box-sizing: border-box xossasi bu muammoni hal qiladi. U bilan width endi butun qutini (content + padding + border) o'z ichiga oladi. Ya'ni width: 200px desangiz, quti aniq 200px bo'ladi — padding va border shu 200px ichida hisoblanadi.

.quti {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Haqiqiy kenglik: aniq 200px */
}
Deyarli barcha zamonaviy loyihalar CSS faylining boshida quyidagi qoidani yozadi. U barcha elementlarni border-boxga o'tkazadi va o'lcham hisoblashni ancha soddalashtiradi. Buni odat qiling:
* {
  box-sizing: border-box;
}

display xossasi

display element qanday "quti" bo'lishini va boshqa elementlar bilan qanday joylashishini belgilaydi. Eng muhim qiymatlar:

block

Block element har doim butun qatorni egallaydi va yangi qatordan boshlanadi. Unga width, height, yuqori/pastki margin berish mumkin. Misollar: <div>, <p>, <h1>, <section>.

inline

Inline element faqat o'z mazmuni qadar joy egallaydi va yangi qator boshlamaydi — bir qatorda yonma-yon turadi. Unga width/height va yuqori/pastki margin ta'sir qilmaydi. Misollar: <span>, <a>, <strong>, <em>.

inline-block

"Ikkalasining eng yaxshisi": element inline kabi yonma-yon turadi, lekin block kabi width, height va margin qabul qiladi. Tugmalar yoki yonma-yon kartalar uchun qulay.

none

Element butunlay yashiriladi — u sahifada ko'rinmaydi va joy ham egallamaydi. Ko'pincha JavaScript orqali elementni ko'rsatish/yashirish uchun ishlatiladi.

.yashirin { display: none; }

.menyu-element {
  display: inline-block;
  width: 120px;
  padding: 10px;
}
display: none bilan visibility: hidden farqli: birinchisida element umuman joy egallamaydi, ikkinchisida element ko'rinmaydi, lekin o'z joyini bo'sh saqlab qoladi.

overflow — mazmun sig'masa nima bo'ladi?

Agar element ichidagi mazmun uning o'lchamidan katta bo'lsa (masalan, height kichik, matn ko'p), overflow xossasi ortiqcha mazmun bilan nima qilishni belgilaydi:

.oyna {
  height: 150px;
  overflow: auto;
}

Xulosa