Chapter 8 — Display Turlari

---

8.1 Display Klasslari

Example

index.html
HTMLNusxalash
01<span class="inline">Men inline elementman</span>
02<div class="block bg-gray-100 p-2">Men block elementman</div>

Mental Model

🧠 block — to'liq qatorni egallaydi, w/h beriladi. inline — faqat kontent kengligini egallaydi, w/h berilmaydi.

8.2 Responsive Visibility

Example

index.html
HTMLNusxalash
01<nav class="hidden md:flex gap-6"><a href="#">Bosh sahifa</a></nav>
02<button class="md:hidden">Menu</button>

⚠️ Common Mistake
hidden/md:blockni noto'g'ri tartibda ishlatish — Tailwind mobile-first, prefikssiz klass mobil uchun default bo'ladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ikkita <span> elementini inline-block qilib, w-24 h-24 bering — natijani kuzating.

🟡 Exercise 2 — Medium

Task: Mobilda yashiringan, lg:block bilan faqat katta ekranda ko'rinadigan sidebar yarating.

🔴 Exercise 3 — Hard

Task: To'liq responsive navbar yarating — mobilda hamburger tugma, desktopda to'liq gorizontal menyu.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="md:hidden">Faqat mobilda ko'rinishi kerak</div>

Your Task: Bu element nega desktopda ham ko'rinib qolyapti?

<details> <summary>Solution</summary> `md:hidden` faqat 768px va undan katta ekranlarda yashiradi — lekin agar ekran 768px dan kichik bo'lsa (mobil), element hali ham default holatda (ko'rinadigan) qoladi, chunki mobil uchun aniq `block`/`flex` berilmagan bo'lsa ham, default HTML display saqlanadi. Muammo emas — bu to'g'ri ishlayapti agar maqsad shu bo'lsa. </details>

---

📌 Chapter Summary

block — to'liq qator, inline — kontent kengligi, flex/grid — layout konteynerlari. hidden + responsive prefiks — mobil/desktop uchun turli UI ko'rsatishning standart usuli.

🎯 Key Takeaways

• Display turini tanlash layout strategiyasini belgilaydi
• Responsive visibility JavaScript'siz CSS orqali hal qilinadi
• inline elementlarda width/height ishlamaydi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01block, inline, inline-block, flex, grid, hidden
02Responsive: hidden md:block, md:flex md:hidden

---