CSSda display xususiyatining asosiy ma'nosi nima va u…

display xususiyati elementning hujjatda qanday ko‘rinishini va boshqa elementlar bilan qanday o‘zaro ta’sir qilishini belgilaydi; bu layout oqimida (layout flow) ishtirok etadi. Bu elementning formatlash blokining turini belgilaydi.

Asosiy qiymatlar:

block: Element blok sifatida formatlanadi. U mavjud bo‘lgan kenglikni to‘liq egallaydi, yangi satrda boshlanadi va o‘lchamlari (width, height) belgilanishi mumkin.
inline: Element satr ichida formatlanadi. Yangi satr boshlamaydi, faqat kerakli kenglikni egallaydi va o‘lchamlari (width, height) belgilanishi mumkin emas. Vertikal chetishlar (margin-top, margin-bottom) va ichki bo‘shliklar (padding-top, padding-bottom) atrofdagi elementlarga ta’sir qilmaydi.
inline-block: Element satr ichida formatlanadi, lekin blok sifatida harakat qiladi. Yangi satr boshlamaydi, o‘lchamlari (width, height) va chetishlar, ichki bo‘shliklar bilan ta’sir qilishi mumkin.
none: Element va uning mazmuni ko‘rsatilmaydi. Element to‘liq hujjat oqimidan olib tashlanadi va joy olmaydi.
flex: Element Flex konteynerga aylanadi, va uning to‘g‘ridan-to‘g‘ri avlodlari Flex elementlar bo‘ladi. Moslashuvchan dizaynlar yaratish uchun ishlatiladi.
grid: Element Grid konteynerga aylanadi. Tarmoq asosidagi dizaynlar yaratish uchun ishlatiladi.

Qanday ishlaydi:

Brauzer display qiymatini ishlatib, elementning formatlash kontekstining turini aniqlaydi. Bu quyidagilarga ta’sir qiladi:

Hujjat oqimi: Element qanday joylashganligi, ya’ni uning yonidagi elementlarga nisbatan.
Element o‘lchamlari: Kenglik va balandlikni belgilash imkoniyati, va mazmunning o‘lchamlarga ta’siri.
Atrofdagi elementlarga ta’siri: Elementning chetishlari va o‘lchamlari boshqa elementlarning joylashuviga qanday ta’sir qilishi.

Misol:

/* display: block bo‘lgan element */
div {
  display: block;
  width: 100%; /* To‘liq kenglikni egallaydi */
  margin-bottom: 10px; /* Vertikal bo‘shliq yaratadi */
}

/* display: inline bo‘lgan element */
span {
  display: inline;
  /* width va height ignor qilinadi */
  /* margin-top va margin-bottom ignor qilinadi */
}

/* display: inline-block bo‘lgan element */
img {
  display: inline-block;
  width: 100px; /* Kenglikni belgilash mumkin */
  height: 100px; /* Balandlikni belgilash mumkin */
  margin: 5px; /* Chegaralarda bo‘shliq yaratadi */
}

/* Yashirilgan element */
.hidden {
  display: none;
}

CSSda display xususiyatining asosiy ma'nosi nima va u qanday ishlaydi?