Chapter 7 — Display Turlari va Ko'rinish

---

7.1 block, inline, inline-block

Example

styles.css
CSSNusxalash
01.block-el { display: block; }        /* To'liq qator, width/height ishlaydi */
02.inline-el { display: inline; }      /* Kontent kengligi, width/height ishlamaydi */
03.inline-block-el { display: inline-block; } /* Qatorda, lekin width/height ishlaydi */

7.2 display:none vs visibility:hidden

Example

styles.css
CSSNusxalash
01.gone { display: none; }        /* DOM'dan "yo'q qilinadi", joy egallamaydi */
02.invisible { visibility: hidden; } /* Ko'rinmaydi, lekin joyi saqlanadi */

⚠️ Common Mistake
display: none va visibility: hiddenni bir xil deb o'ylash — ular butunlay boshqacha layout natijasi beradi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bir xil elementga navbatma-navbat block, inline, inline-block bering va DevTools'da farqni kuzating.

🟡 Exercise 2 — Medium

Task: display: none va visibility: hiddenni ikkita alohida elementda solishtiring — atrofdagi elementlar qanday reaksiya berishini ko'ring.

🔴 Exercise 3 — Hard

Task: opacity va transition yordamida sichqoncha ustiga kelganda asta-sekin paydo bo'ladigan tooltip yarating.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.icon { width: 24px; height: 24px; }

index.html
HTMLNusxalash
01<span class="icon">🔔</span>

Your Task: width/height nega ta'sir qilmayapti?

<details> <summary>Solution</summary> `<span>` — default holatda `inline` element, shuning uchun width/height e'tiborga olinmaydi. Yechim: `display: inline-block` yoki `display: block` qo'shish. </details>

---

📌 Chapter Summary

block — to'liq qator, inline — kontent kengligi (w/h ishlamaydi), inline-block — ikkalasining kombinatsiyasi. display: none joy egallamaydi, visibility: hidden esa joyni saqlaydi.

🎯 Key Takeaways

• Har bir HTML teg o'zining default display qiymatiga ega (<div>=block, <span>=inline)
• Animatsiya uchun display emas, opacity/visibility ishlatiladi
• inline-block — ikonka va kichik UI elementlar uchun foydali

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01display: block | inline | inline-block | none;
02visibility: visible | hidden; /* joy saqlanadi */

---