display
Misol
Ba’zi turli display qiymatlaridan foydalanish:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
display xususiyati elementning ko‘rsatilish xatti-harakatini (render qilinadigan quti turini) belgilaydi.
| Standart qiymat: | inline |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.display="none" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Eslatma: "flex" va "inline-flex" qiymatlari Safari’ning 9-versiyasidan oldingi versiyalarida ishlashi uchun -webkit- prefiksini talab qiladi.
Eslatma: "display: contents" Edge’ning 79-versiyasidan oldingi versiyalarida ishlamaydi.
CSS sintaksisi
display: value;
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘ring |
|---|---|---|
| inline | Elementni inline element sifatida ko‘rsatadi (<span> kabi). height va width xususiyatlari hech qanday ta’sir qilmaydi. Bu standart qiymat. | Demo ❯ |
| block | Elementni blok element sifatida ko‘rsatadi (<p> kabi). U yangi qatordan boshlanadi va butun kenglikni egallaydi | Demo ❯ |
| contents | Konteynerni yo‘qotadi va uning bola elementlarini DOM’dagi bir daraja yuqoridagi elementning bola elementlariga aylantiradi | Demo ❯ |
| flex | Elementni blok darajasidagi flex konteyner sifatida ko‘rsatadi | Demo ❯ |
| grid | Elementni blok darajasidagi grid konteyner sifatida ko‘rsatadi | Demo ❯ |
| inline-block | Elementni inline darajasidagi blok konteyner sifatida ko‘rsatadi. Elementning o‘zi inline element sifatida formatlanadi, lekin unga height va width qiymatlarini qo‘llash mumkin | Demo ❯ |
| inline-flex | Elementni inline darajasidagi flex konteyner sifatida ko‘rsatadi | Demo ❯ |
| inline-grid | Elementni inline darajasidagi grid konteyner sifatida ko‘rsatadi | Demo ❯ |
| inline-table | Element inline darajasidagi jadval sifatida ko‘rsatiladi | Demo ❯ |
| list-item | Element <li> elementi kabi ishlaydi | Demo ❯ |
| run-in | Kontekstga qarab elementni blok yoki inline sifatida ko‘rsatadi | Demo ❯ |
| table | Element <table> elementi kabi ishlaydi | Demo ❯ |
| table-caption | Element <caption> elementi kabi ishlaydi | |
| table-column-group | Element <colgroup> elementi kabi ishlaydi | |
| table-header-group | Element <thead> elementi kabi ishlaydi | |
| table-footer-group | Element <tfoot> elementi kabi ishlaydi | |
| table-row-group | Element <tbody> elementi kabi ishlaydi | |
| table-cell | Element <td> elementi kabi ishlaydi | |
| table-column | Element <col> elementi kabi ishlaydi | |
| table-row | Element <tr> elementi kabi ishlaydi | |
| none | Element butunlay olib tashlanadi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
contents xususiyat qiymatidan qanday foydalanish namoyishi. Quyidagi misolda .a konteyneri yo‘qoladi va uning bola elementlari (.b) DOM’dagi bir daraja yuqoridagi elementning bola elementlariga aylanadi:
.a {
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
O‘zingiz sinab ko‘ring »
Misol
inherit xususiyat qiymatidan qanday foydalanish namoyishi:
body {
display: inline;
}
p {
display: inherit;
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementi ichidagi ba’zi flex elementlarning yo‘nalishini teskari tartibga o‘rnating:
div {
display: flex;
flex-direction: row-reverse;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS display va visibility
HTML DOM ma’lumotnomasi: display xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!