# CSS bo'limi — test

> CSS selektorlar, cascade, rang, tipografiya, box model, Flexbox, Grid, position va responsive dizayn bo'yicha 15 ta interaktiv savol.

Manba: https://learncode.uz/html-css/css-quiz/
Sana: 2026-05-24

## 1. `.xabar p` va `.xabar > p` farqi nima?

- Farqi yo'q
- **Birinchisi barcha avlod, ikkinchisi faqat bevosita farzand** (to'g'ri)
- Ikkinchisi barcha avlod
- Birinchisi faqat birinchi p

`>` child combinator faqat bevosita farzandni tanlaydi.

Takrorlash: https://learncode.uz/html-css/selektorlar/

## 2. Bir xil specificitydagi qoidalar qarama-qarshi bo'lsa, qaysi biri yutadi?

- Birinchisi
- **Keyinroq yozilgani** (to'g'ri)
- Eng uzun selector
- Eng ko'p class

Bir xil origin va qatlamda keyingi qoida ustun keladi.

Takrorlash: https://learncode.uz/html-css/selektorlar/

## 3. `width:300px; padding:20px; border:2px` content-boxda tashqi kengligi?

- 300px
- 320px
- **344px** (to'g'ri)
- 304px

300 + 40px padding + 4px border = 344px.

Takrorlash: https://learncode.uz/html-css/box-model/

## 4. `outline: none`ni yolg'iz ishlatish nega xavfli?

- Sahifa sekinlashadi
- **Klaviatura fokusi ko'rinmay qoladi** (to'g'ri)
- Rasm yo'qoladi
- Grid buziladi

Outline o'rniga aniq `:focus-visible` holati bo'lishi kerak.

Takrorlash: https://learncode.uz/html-css/selektorlar/

## 5. Xatoni faqat qizil rang bilan ko'rsatish nega yetarli emas?

- Qizil sekin
- **Rangni ajratmaydiganlar ma'noni yo'qotadi** (to'g'ri)
- CSS taqiqlaydi
- Telefon rang ko'rsatmaydi

Rang bilan birga matn yoki ikon kabi boshqa signal ham kerak.

Takrorlash: https://learncode.uz/html-css/rang-fon/

## 6. `rem` qaysi o'lchamga nisbatan?

- Ota element
- **Ildiz html shrift o'lchami** (to'g'ri)
- Ekran eni
- Element balandligi

`rem` document rootning hisoblangan shrift o'lchamiga tayanadi.

Takrorlash: https://learncode.uz/html-css/matn-stillari/

## 7. Maqolada `max-width:68ch` nima beradi?

- Rasmni kattalashtiradi
- **O'qish uchun satr uzunligini cheklaydi** (to'g'ri)
- Matnni markazlaydi
- Faqat mobilga ta'sir qiladi

Juda uzun satrlarni cheklash o'qishni osonlashtiradi.

Takrorlash: https://learncode.uz/html-css/matn-stillari/

## 8. Flexboxda `justify-content` doim gorizontalmi?

- Ha
- **Yo'q, main axis bo'ylab ishlaydi** (to'g'ri)
- Faqat Gridda
- Faqat column'da

Column flexda main axis vertikal bo'ladi.

Takrorlash: https://learncode.uz/html-css/flexbox/

## 9. `flex: 1 1 220px` nimani anglatadi?

- **grow, shrink, basis** (to'g'ri)
- width, height, gap
- row, column, wrap
- margin, padding, border

Qiymatlar mos ravishda flex-grow, flex-shrink va flex-basis.

Takrorlash: https://learncode.uz/html-css/flexbox/

## 10. Grid va Flexboxdan qaysi biri har doim yaxshi?

- Grid
- Flexbox
- **Hech biri; vazifaga bog'liq** (to'g'ri)
- Ikkalasi ishlatilmaydi

Grid ikki o'lchamli, Flexbox bitta asosiy o'qli layoutda qulay.

Takrorlash: https://learncode.uz/html-css/grid/

## 11. `repeat(auto-fit, minmax(180px, 1fr))` nima qiladi?

- Bitta 180px ustun
- **Sig'adigan minimum 180px ustunlar yaratadi** (to'g'ri)
- Faqat desktopda ishlaydi
- Rasmni kesadi

Joy toraysa itemlar yangi qatorga o'tadi, qolgan joy taqsimlanadi.

Takrorlash: https://learncode.uz/html-css/grid/

## 12. `position:absolute` odatda nimaga nisbatan joylashadi?

- Viewportga doim
- **Eng yaqin containing blockga** (to'g'ri)
- Faqat bodyga
- Oxirgi siblingga

Ko'pincha `position:relative`li ota containing block bo'ladi.

Takrorlash: https://learncode.uz/html-css/pozitsiya/

## 13. `z-index:9999` har doim eng tepaga chiqaradimi?

- Ha
- **Yo'q, stacking context ichida taqqoslanadi** (to'g'ri)
- Faqat Safari'da
- Faqat absolute bo'lsa

Ichki katta z-index ota stacking context chegarasidan o'tolmaydi.

Takrorlash: https://learncode.uz/html-css/pozitsiya/

## 14. Breakpoint qanday tanlanishi kerak?

- Telefon modeliga qarab
- **Kontent siqilib ishlatish yomonlashgan joyda** (to'g'ri)
- Har doim 768px
- Faqat 320px

Breakpoints qurilma nomi emas, kontent ehtiyojidan keladi.

Takrorlash: https://learncode.uz/html-css/responsiv-dizayn/

## 15. `meta viewport` bo'lmasa nima xavf bor?

- CSS yuklanmaydi
- **Mobil layout viewport noto'g'ri kenglikda bo'lib breakpoint kutilgandek ishlamasligi mumkin** (to'g'ri)
- HTML yo'qoladi
- Faqat rang o'zgaradi

Viewport meta mobil responsive ko'rinish uchun zarur.

Takrorlash: https://learncode.uz/html-css/responsiv-dizayn/