Kursning eng katta moduli: har bir element "quti" ekani, qutilarning o’lchami, joylashuvi va qatlamlari o’rganildi.

Box model — quti modeli

Har bir HTML element to’rt qavatli quti: ichida content (kontent), uning atrofida padding (ichki bo’shliq), keyin border (chegara), tashqarida margin (tashqi bo’shliq — qo’shnilargacha masofa).

.card {
  padding: 16px;
  border: 1px solid gray;
  margin: 24px;
}

Natija: kontent bilan chegara orasida 16px "havo", atrofida ingichka chiziq, qo’shni elementlargacha 24px masofa.

DevTools’da elementni Inspect qilsangiz, pastda shu qutining rangli sxemasi chiqadi — qaysi qavat qancha joy olayotganini o’sha yerda ko’ring.

Tipik xato. padding bilan margin’ni adashtirish. Oddiy qoida: element ichiga havo kerakmi — padding, tashqarisigami — margin.

Margin collapsing va shorthand

Ikkita vertikal qo’shni elementning marginlari qo’shilmaydi — kattasi yutadi (margin collapsing): tepadagining margin-bottom: 30px, pastdagining margin-top: 20px bo’lsa, oradagi masofa 50 emas, 30px bo’ladi. Bu faqat vertikal yo’nalishda yuz beradi.

Shorthand — to’rt tomonni bitta qatorda yozish:

Width, height va max/min chegaralar

width/height qat’iy o’lcham beradi, lekin qat’iylik responsive dunyoda xavfli. max-width — "bundan oshma", min-height — "bundan kichik bo’lma":

.container {
  width: 100%;
  max-width: 960px;
}

Natija: konteyner tor ekranda to’liq kenglikni oladi, keng ekranda esa 960px’da to’xtaydi.

display xossasi

Elementning oqimdagi turini o’zgartiradi:

.menu a {
  display: inline-block;
  padding: 8px 16px;
}

Natija: havolalar yonma-yon qoladi, lekin endi ularga to’laqonli padding berish mumkin — tugmaga o’xshab qoladi.

text-align, vertical-align va float

text-align: center — block ichidagi matnni (va inline elementlarni) markazlaydi. vertical-align inline elementlarning qatordagi vertikal turishini sozlaydi. float: left/right elementni chetga "suzdirib", matn uni aylanib o’tadi — asosan rasm bilan matn uchun:

img.chapda {
  float: left;
  margin-right: 16px;
}

Natija: rasm chap chetda, matn uning o’ng tomonidan oqib o’tadi.

Tipik xato. Float bilan butun sahifa maketini qurishga urinish — bu eski usul, chalkash oqibatlari ko’p. Float — matn oqimi uchun; zamonaviy maket vositalari (flexbox, grid) alohida kursda o’rganiladi.

text-decoration, pseudo-class va guruhlash

text-decoration: none — havolaning tag chizig’ini olib tashlaydi. Pseudo-class — elementning holatiga qarab uslub:

a { color: teal; text-decoration: none; }
a:hover { text-decoration: underline; }

Natija: havolalar chiziqsiz; sichqoncha ustiga kelganda chiziq paydo bo’ladi.

:hover (ustida), :active (bosilayotganda), :focus (tanlangan maydon) — eng ko’p ishlatiladigan uchlik. Bir xil uslubli selektorlarni vergul bilan guruhlang: h1, h2, h3 { ... }.

Position — joylashuv

position elementni odatiy oqimdan chiqarib boshqacha joylashtiradi; siljitish top/right/bottom/left bilan beriladi:

.header {
  position: sticky;
  top: 0;
}

Natija: sahifa aylantirilganda sarlavha ekran tepasiga yopishib, doim ko’rinib turadi.

Tipik xato. absolute element "qochib ketdi" — sahifaning eng tepasiga borib qoldi. Sabab: uning hech bir otasida position: relative yo’q, shuning uchun u butun sahifaga nisbatan joylashdi. Absolute ishlatishdan oldin otasiga relative bering.

z-index va overflow

Qutilar ustma-ust tushganda tartibni z-index belgilaydi (kattaroq — ustida; faqat position berilgan elementlarda ishlaydi). overflow esa sig’may qolgan kontent taqdiri: visible (toshib chiqadi), hidden (kesiladi), scroll/auto (aylantirish paydo bo’ladi).

Amaliyot

1. "Karta" komponenti yasang: padding, border, margin — DevTools’da quti sxemasini ochib, har qavatni ko’rsating.
2. Ikki xatboshiga har xil vertikal margin berib, collapsing’ni o’lchab isbotlang.
3. Gorizontal menyu yasang: inline-block havolalar, :hoverda fon o’zgarsin.
4. Maqola sahifasi: rasm float: left, matn aylanib o’tsin.
5. sticky sarlavha va burchakka fixed "Tepaga" tugmasini qo’shing.
6. Ikki rangli kvadratni ataylab ustma-ust tushirib, tartibini z-index bilan almashtiring.

Modul testi sizni kutmoqda — keyingi modulda qutilarni bezash boshlanadi: fon, rasm, gradient.