Tata Letak CSS - Tampilan Properti ~ KODELOVER

Properti display adalah properti CSS yang paling penting untuk mengubah layout/tata letak.

Tampilan Properti
Properti tampilan menentukan apakah / bagaimana elemen ditampilkan.Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau inline.

Unsur tingkat blok
Elemen tingkat blok selalu dimulai pada baris baru dan menghabiskan lebar penuh yang tersedia (membentang ke kiri dan kanan seluruhnya).Elemen <div> adalah elemen tingkat blok.
Contoh elemen tingkat blok:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Elemen inline
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.Ini adalah elemen inline <span> di dalam paragraf.
Contoh elemen inline:

<span>
<a>
<img>

Display: none;

display:none; Biasanya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakannya kembali. Lihatlah contoh terakhir kami di halaman ini jika Anda ingin tahu bagaimana hal ini dapat dicapai.<Script> elemen menggunakan display: none; Sebagai default nya.
Ganti Nilai Tampilan Default
Seperti disebutkan, setiap elemen memiliki nilai tampilan default. Namun, hal ini bisa diabaikan. Mengubah elemen inline menjadi elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara yang spesifik, dan tetap mengikuti standar web.Contoh umum adalah membuat elemen inline <li> untuk menu horizontal:
Contoh:

li {
display: inline;
}

Mengatur properti tampilan elemen hanya mengubah bagaimana elemen ditampilkan, BUKAN jenis elemennya. Jadi, elemen inline dengan tampilan: blok; Tidak diizinkan untuk memiliki elemen blok lain di dalamnya.Contoh berikut menampilkan elemen <span> sebagai elemen blok:
Contoh:

span {
display: block;
}

Sembunyikan Elemen - layar: tidak ada atau jarak pandang: tersembunyi?
Menyembunyikan elemen dapat dilakukan dengan menyetel properti display ke none. Elemen akan disembunyikan, dan halaman akan ditampilkan seolah-olah elemennya tidak ada di sana:
Contoh

h1.hidden {
display: none;
}

visibility:hidden; Juga menyembunyikan sebuah elemenNamun, elemen tersebut tetap akan memakan ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, namun tetap mempengaruhi tata letak:Contoh

h1.hidden {
visibility: hidden;
}

dan banyak lagi contoh lainya

Tampilan CSS / Visibilitas Properti
Display Menentukan bagaimana elemen harus ditampilkan
visibility Menentukan apakah elemen harus terlihat atau tidak

KODELOVER

Tata Letak CSS - Tampilan Properti

Display: none;

Related Post