Display xossasi

display - CSS ning layout* ni nazorat qilish uchuneng 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.

picture

Block-level elementiga kiruvchi tarkib uchun namuna:


Inline elementlar

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

picture

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:

remember

Quyidagi namunada span elementlari, blok elementlari sifatida aks etadi:

image w3schools.com

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

image

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:

image

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:

image

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