Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS display

ULASHISH

CSS display xossasi

display xossasi maketni boshqarishda muhim CSS xossasidir. U HTML elementning blok yoki inline element sifatida qabul qilinishini belgilaydi.

Har bir HTML elementning standart display qiymati bor — element qanday turda ekaniga qarab. Ko‘pgina elementlar uchun standart display qiymati block yoki inline.

display xossasi HTML elementlarining standart ko‘rsatish xatti-harakatini o‘zgartirish uchun ishlatiladi.

Blok-darajadagi elementlar

Blok darajasidagi element HAR DOIM yangi qatordan boshlanadi va mavjud bo‘sh kenglikni (chap va o‘nggacha imkon qadar cho‘zilib) egallaydi.

<div> elementi blokli elementdir.

Blok darajasidagi elementlarga misollar:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline elementlar

Inline element yangi qatordan BOSHLANMAYDI va faqat zarur bo‘lgancha kenglikni egallaydi.

Bu paragraf ichidagi inline <span> elementi.

Inline elementlarga misollar:

  • <span>
  • <a>
  • <img>

Keng tarqalgan display qiymatlari

CSS display xossasining ko‘p qiymatlari bor. Quyidagi jadval eng ko‘p ishlatiladiganlarini sanab o‘tadi:

Qiymat Tavsif
inline Elementni inline element sifatida ko‘rsatadi
block Elementni blok element sifatida ko‘rsatadi
contents Konteynerni yo‘q qiladi, bu esa uning pastki elementlarini DOMda keyingi darajaga elementning bolalari qiladi
flex Elementni blok darajasidagi flex konteyner sifatida ko‘rsatadi
grid Elementni blok darajasidagi grid konteyner sifatida ko‘rsatadi
inline-block Elementni inline-darajali blokli konteyner sifatida ko‘rsatadi. Elementning o‘zi ichki element sifatida formatlangan, lekin siz balandlik, kenglik, to‘ldirish va chekka qiymatlarini qo‘llashingiz mumkin
none Element hujjat oqimidan butunlay yashiriladi (hech qanday joy egallamaydi).

Standart display qiymatini almashtirish

display xossasi HTML elementlarining standart ko‘rsatish xatti-harakatini o‘zgartirish uchun ishlatiladi.

Inline elementni blok elementga (yoki aksincha) aylantirish sahifani ma’lum ko‘rinishga keltirish va ayni paytda veb-standartlarga ergashish uchun foydali bo‘lishi mumkin.

Keng tarqalgan misol — gorizontal menyu yaratish uchun <li> elementlarini inline qilish:

Misol

li {
  display: inline;
}
O‘zingiz sinab ko‘ring »

Eslatma: Elementning display xossasini belgilash faqat element qanday ko‘rsatilishini o‘zgartiradi, u qanday turdagi element ekanini EMAS. Demak, display: block; ega inline element ichiga boshqa blok elementlar qo‘yishga ruxsat berilmaydi.

Quyidagi misol <span> elementlarini blok elementlar sifatida ko‘rsatadi:

Misol

span {
  display: block;
}
O‘zingiz sinab ko‘ring »

Quyidagi misol <a> elementlarini blok elementlar sifatida ko‘rsatadi:

Misol

a {
  display: block;
}
O‘zingiz sinab ko‘ring »

Boshqa display qiymatlari misoli

Quyidagi misol yana ba’zi display qiymatlarini ko‘rsatadi:

Misol

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
O‘zingiz sinab ko‘ring »
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish