The display properti adalah properti CSS yang paling penting untuk mengendalikan tata letak.
Tampilan Properti
The display properti menentukan jika / bagaimana elemen ditampilkan.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk kebanyakan unsur adalah block atau inline .
Klik untuk menampilkan panel
Panel ini berisi <div> elemen, yang tersembunyi secara default ( display: none ).
Hal ini ditata dengan CSS, dan kami menggunakan JavaScript untuk menunjukkan hal itu (mengubahnya ke ( display: block ).
Elemen blok-tingkat
Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).
Contoh elemen blok-tingkat:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
inline Elements
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.
Ini adalah inline <span> elemen di dalam sebuah paragraf.
Contoh elemen inline:
- <span>
- <a>
- <img>
Display: none;
display: none; umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan mereka. Lihatlah contoh terakhir kami pada halaman ini jika Anda ingin tahu bagaimana hal ini dapat dicapai.
The <script> elemen menggunakan display: none; sebagai default.
Override Default Nilai Tampilan
Seperti disebutkan, setiap elemen memiliki nilai tampilan default. Namun, Anda dapat mengganti ini.
Mengubah elemen inline untuk elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.
Sebuah contoh umum adalah membuat inline <li> elemen untuk menu horisontal:
 | Catatan: Mengatur properti tampilan elemen hanya mengubah cara elemen ditampilkan, tidak apa elemen itu.Jadi, elemen inline dengan display: block; tidak diizinkan untuk memiliki elemen blok lainnya di dalamnya. |
|---|
Contoh berikut menampilkan <span> elemen sebagai elemen blok:
Menyembunyikan Elemen - display:none atau visibility:hidden ?
Menyembunyikan elemen dapat dilakukan dengan pengaturan display properti untuk none . elemen akan disembunyikan, dan halaman yang akan ditampilkan sebagai jika elemen tidak ada:
visibility:hidden; juga menyembunyikan elemen.
Namun, elemen masih akan mengambil ruang yang sama seperti sebelumnya. elemen akan disembunyikan, tapi masih mempengaruhi tata letak:
Contoh lebih
display: none; vs visibility: hidden;
Contoh ini menunjukkan display: none; vs visibility: hidden;
Menggunakan CSS bersama-sama dengan JavaScript untuk menampilkan konten
Contoh ini menunjukkan bagaimana menggunakan CSS dan JavaScript untuk menunjukkan elemen di klik.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
CSS Tampilan / Visibility Properti
| Milik | Deskripsi |
|---|---|
| display | Menentukan bagaimana elemen harus ditampilkan |
| visibility | Menentukan apakah atau tidak unsur harus terlihat |