Display xossasi

display - CSS ning layout* ni nazorat qilish uchun eng asosiy xossasi.

layout - saytning strukturasi, tuzilmasi.

Display xossasi

Bu xossa elementning ekranda qanday ko'rinishi kerakligini belgilaydi.

Har bir HTML elementining, u qanday turdagi elementligiga qarab standart ko'rinishi(display)ga ega. Hozir block va inline blok elementlarining standart ko'rinishi bilan tanishamiz.

Block-level elementlar

block-level elementlar har doim yangi qatordan boshlanadi va ular imkoni boricha to'liq kenglikni egallaydi.

Block-level elementiga kiruvchi tarkib uchun namuna:

Inline elementlar

Inline elementi yangi qatordan boshlanmaydi va u o'ziga sig'adigan joynigina egallaydi.

Inline elementi tarkibiga kiruvchi elementlar, misol uchun:

Display: none;

display: none; - odatda elementlarni o'chirmasdan yoki qayta yaratmasdan turib ularni yashirish va ko'rsatish uchun JavaScriptdan foydalaniladi.

Standart Display qiymatni o'zgartirish

Yuqorida ta'kidlaganimdek, har bir elementning o'zini display qiymati mavjud. Ammo, biz uni o'zgartirishimiz ham mumkin.

Inline elementni blok elementga almashtirishimiz yoki aksincha, bu bizga sahifani muayyan ko'rinishga keltirishda va uni veb standartlariga mos kelishida yordam beradi.

Misol uchun li inline elementini gorizontal menyuga keltiramiz:

Quyidagi namunada span elementlari, blok elementlari sifatida aks etadi:

Quyidagi namunada a elementlari , blok elementlari sifatida ko'rinadi:

Elementlarni yashirish. display: none yoki visibility: hidden?

Elementlarni yashirish display xossasini none qiymatga o'zgartirish bilan amalga oshiriladi. Sahifada xuddi element yo'qdek ko'rinadi:

visibility: hidden; ham elementni yashiradi.

Ammo, bu element yashirilgan element joyida bo'sh joy qoldiradi. Element yashirinadi ammo sahifa layout'ida bo'sh joy ko'rinib qoladi:

Sanjar Sobirjonov | t.me/tutorials.uz | FrontendPro