CSS Tashkiliy - Display Xususiyati
Display Xususiyati
Display xususiyati layoutni boshqarish uchun eng muhim CSS xususiyatidir.
Display Xususiyati
Display xususiyati veb sahifada element qanday ko'rsatilishini belgilash uchun ishlatiladi.
Har bir HTML elementi o'z turiga qarab standart display qiymatiga ega. Ko'p elementlar uchun standart display qiymati block yoki inline.
Display xususiyati HTML elementlarining standart display xatti-harakatini o'zgartirish uchun ishlatiladi.
Blok Darajadagi Elementlar
Blok darajadagi element HAR DOIM yangi qatorda boshlanadi va mavjud bo'lgan to'liq kenglikni egallaydi (chapga va o'ngga imkon qadar cho'ziladi).
<div> elementi blok darajadagi elementdir.
Blok darajadagi elementlar misollari:
<div><h1> - <h6><p><form><header><footer><section>
Inline Elementlar
Inline element YANGI QATORDA boshlanmaydi va faqat zaruriy kenglikni egallaydi.
Bu bir <span> inline elementi paragraflar ichida joylashgan.
Inline elementlar misollari:
<span><a><img>
Display Xususiyati Qiymatlari
Display xususiyatining ko'p qiymatlari mavjud:
| Qiymat | Ta'rif |
|---|---|
inline | Elementni inline elementi sifatida ko'rsatadi |
block | Elementni blok elementi sifatida ko'rsatadi |
contents | Idorani yo'q qiladi va bolalar elementlarini DOMda bir yuqori darajadagi elementlar sifatida ko'rsatadi |
flex | Elementni blok darajadagi flex konteyner sifatida ko'rsatadi |
grid | Elementni blok darajadagi grid konteyner sifatida ko'rsatadi |
inline-block | Elementni inline darajadagi blok konteyner sifatida ko'rsatadi. Element o'zi inline elementi sifatida formatlangan, lekin siz balandlik va kenglik qiymatlarini qo'llashingiz mumkin |
inline-flex | Elementni inline darajadagi flex konteyner sifatida ko'rsatadi |
inline-grid | Elementni inline darajadagi grid konteyner sifatida ko'rsatadi |
inline-table | Element inline darajadagi jadval sifatida ko'rsatiladi |
list-item | Elementni <li> elementi kabi harakat qilishiga imkon beradi |
run-in | Elementni kontekstga qarab blok yoki inline sifatida ko'rsatadi |
table | Elementni <table> elementi kabi harakat qilishiga imkon beradi |
table-caption | Elementni <caption> elementi kabi harakat qilishiga imkon beradi |
table-column-group | Elementni <colgroup> elementi kabi harakat qilishiga imkon beradi |
table-header-group | Elementni <thead> elementi kabi harakat qilishiga imkon beradi |
table-footer-group | Elementni <tfoot> elementi kabi harakat qilishiga imkon beradi |
table-row-group | Elementni <tbody> elementi kabi harakat qilishiga imkon beradi |
table-cell | Elementni <td> elementi kabi harakat qilishiga imkon beradi |
table-column | Elementni <col> elementi kabi harakat qilishiga imkon beradi |
table-row | Elementni <tr> elementi kabi harakat qilishiga imkon beradi |
none | Elementni butunlay olib tashlaydi |
initial | Ushbu xususiyatni standart qiymatiga o'rnatadi |
inherit | Ushbu xususiyatni ota elementdan meros qilib oladi |
Display: none;
display: none; odatda JavaScript bilan elementlarni yashirish va ko'rsatish uchun ishlatiladi, buni ularni o'chirib va qayta yaratmasdan amalga oshirish mumkin. Ushbu sahifadagi oxirgi misolga qarang, agar bu qanday amalga oshirilishini bilmoqchi bo'lsangiz.
<script> elementi standart bo'yicha display: none; ni ishlatadi.
Standart Display Qiymatini O'zgartirish
Har bir elementning standart display qiymati mavjud. Biroq, siz buni o'zgartirishingiz mumkin.
Inline elementni blok elementga, yoki aksincha o'zgartirish, sahifaning ma'lum ko'rinishini yaratish va hali ham veb standartlariga amal qilish uchun foydali bo'lishi mumkin.
Odatda, inline <li> elementlarni gorizontal menyular uchun tayyorlash uchun keng tarqalgan misol:
Misol
Eslatma: Elementning display xususiyatini o'rnatish faqat elementning qanday ko'rsatilishini o'zgartiradi, ELEMENT TURI nima ekanligini emas. Shunday qilib, display: block; bilan inline element ichida boshqa blok elementlar joylashishi mumkin emas.
Quyidagi misol <span> elementlarini blok elementlari sifatida ko'rsatadi:
Misol
Quyidagi misol <a> elementlarini blok elementlari sifatida ko'rsatadi:
Misol
Elementni Yashirish - display:none yoki visibility:hidden?
display:none
Italy
visibility:hidden
Forest
Reset
Lights
Elementni yashirish display xususiyatini none ga o'rnatish orqali amalga oshirilishi mumkin. Element yashirin bo'ladi va sahifa element yo'qdek ko'rsatiladi:
Misol
visibility:hidden; ham elementni yashiradi.
Biroq, element hali ham avvalgi kabi joyni egallaydi. Element yashirin bo'ladi, lekin hali ham layoutga ta'sir qiladi:
Misol
Boshqa Misollar
display: none; va visibility: hidden; o'rtasidagi farqlar
Ushbu misol display: none; va visibility: hidden; ni taqqoslaydi.
Boshqa display turlarini ko'rsatish
Ushbu misol yana ba'zi display turlarini ko'rsatadi.
CSS va JavaScript bilan birga ishlatib kontentni ko'rsatish
Ushbu misol CSS va JavaScript yordamida elementni bosilganda qanday ko'rsatishni ko'rsatadi.
CSS Display/Visibility Xususiyatlari
| Xususiyat | Ta'rif |
|---|---|
display | Element qanday ko'rsatilishini belgilaydi |
visibility | Element ko'rinishi kerakmi yoki yo'qligini belgilaydi |