Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Nieruchomość wyświetlacz określa rodzaj ramki stosowanej dla danego elementu HTML.
| Domyślna wartość: | inline |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS1 |
| Składnia JavaScript: | object .style.display="none" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| display | 4,0 | 8,0 Częściowa od 5,5 | 3,0 | 3,1 | 7,0 |
Note: Wartości "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" i "table-row-group" nie są obsługiwane w IE7 i wcześniejszych. IE8 wymaga! DOCTYPE. IE9 wspiera wartości.
Uwaga: Wartości "flex" oraz "inline-flex" wymaga prefiksu do pracy w Safari. Dla "flex" użyć "display: -webkit-flex" , na "inline-flex" użyć "display: -webkit-inline-flex;" ,
Składnia CSS
display:value;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| inline | Domyślna wartość. Wyświetla element jako element inline (like <span>) | Graj " |
| block | Wyświetla element jako element bloku (like <p>) | Graj " |
| flex | Wyświetla element jako blok poziomie elastycznego pojemnika. Nowości w CSS3 | |
| inline-block | Wyświetla element w postaci bloku pojemnika inline poziomu. Wewnątrz tego bloku jest formatowane jako pole blokowe poziomu, a sam element jest sformatowana jako pole śródliniowe | |
| inline-flex | Wyświetla element jako inline poziomie elastycznego pojemnika. Nowości w CSS3 | |
| inline-table | Element jest wyświetlany jako inline tabeli poziomie | |
| list-item | Niech element zachowuje się jak <li> elementu | Graj " |
| run-in | Wyświetla element albo jako blok lub inline, w zależności od kontekstu | |
| table | Niech element zachowuje się jak <table> elementu | |
| table-caption | Niech element zachowuje się jak <caption> elementu | |
| table-column-group | Niech element zachowuje się jak <colgroup> elementu | |
| table-header-group | Niech element zachowuje się jak <thead> elementu | |
| table-footer-group | Niech element zachowuje się jak <tfoot> elementu | |
| table-row-group | Niech element zachowuje się jak <tbody> elementu | |
| table-cell | Niech element zachowuje się jak <td> elementu | |
| table-column | Niech element zachowuje się jak <col> elementu | |
| table-row | Niech element zachowuje się jak <tr> elementu | |
| none | Element nie zostanie w ogóle (has no effect on layout) | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Demonstracja, jak korzystać z dziedziczenia wartości nieruchomości:
body {
display: inline;
}
p {
display: inherit;
} Spróbuj sam " Przykład
Ustaw kierunek pewnych elastycznych elementów wewnątrz <div> elementu w odwrotnej kolejności:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Spróbuj sam " Podobne strony
Kurs CSS: CSS Wyświetlacz i widoczności
Odniesienia HTML DOM: display property