Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti tampilan menentukan jenis kotak yang digunakan untuk elemen HTML.
| nilai default: | inline |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS1 |
| sintaks JavaScript: | object .style.display="none" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8,0 Parsial dari 5,5 | 3.0 | 3.1 | 7.0 |
Note: Nilai-nilai "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" , dan "table-row-group" tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan DOCTYPE!. IE9 mendukung nilai-nilai.
Catatan: Nilai-nilai "flex" dan "inline-flex" membutuhkan awalan untuk bekerja di Safari. Untuk "flex" menggunakan "display: -webkit-flex" , untuk "inline-flex" menggunakan "display: -webkit-inline-flex;" .
CSS Syntax
display:value;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| inline | nilai default. Menampilkan elemen sebagai elemen inline (like <span>) | Mainkan " |
| block | Menampilkan elemen sebagai elemen blok (like <p>) | Mainkan " |
| flex | Menampilkan unsur sebagai wadah fleksibel blok-tingkat. Baru di CSS3 | |
| inline-block | Menampilkan unsur sebagai blok kontainer inline-tingkat. Bagian dalam blok ini diformat sebagai kotak blok-tingkat, dan unsur itu sendiri diformat sebagai kotak inline-tingkat | |
| inline-flex | Menampilkan unsur sebagai wadah fleksibel inline-tingkat. Baru di CSS3 | |
| inline-table | Unsur ini ditampilkan sebagai tabel inline-tingkat | |
| list-item | Biarkan elemen berperilaku seperti <li> elemen | Mainkan " |
| run-in | Menampilkan unsur baik sebagai blok atau inline, tergantung pada konteks | |
| table | Biarkan elemen berperilaku seperti <table> elemen | |
| table-caption | Biarkan elemen berperilaku seperti <caption> elemen | |
| table-column-group | Biarkan elemen berperilaku seperti <colgroup> elemen | |
| table-header-group | Biarkan elemen berperilaku seperti <thead> elemen | |
| table-footer-group | Biarkan elemen berperilaku seperti <tfoot> elemen | |
| table-row-group | Biarkan elemen berperilaku seperti <tbody> elemen | |
| table-cell | Biarkan elemen berperilaku seperti <td> elemen | |
| table-column | Biarkan elemen berperilaku seperti <col> elemen | |
| table-row | Biarkan elemen berperilaku seperti <tr> elemen | |
| none | Elemen tidak akan ditampilkan sama sekali (has no effect on layout) | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Sebuah demonstrasi bagaimana menggunakan nilai properti mewarisi:
body {
display: inline;
}
p {
display: inherit;
} Cobalah sendiri " Contoh
Mengatur arah beberapa item yang fleksibel di dalam <div> elemen dalam urutan terbalik:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} Cobalah sendiri " Pages terkait
CSS tutorial: CSS Tampilan dan visibilitas
Referensi HTML DOM: display property