Rabu, 17 Agustus 2022

CSS Property Display


Display
Nilai Keterangan
inline Menampilkan elemen sebagai elemen sebaris (seperti ). Properti tinggi dan lebar apa pun tidak akan berpengaruh
block Menampilkan elemen sebagai elemen blok (seperti <p>). Ini dimulai pada baris baru, dan mengambil seluruh lebar
contents Membuat wadah menghilang, membuat elemen anak menjadi anak-anak dari elemen tingkat berikutnya di DOM
flex Menampilkan elemen sebagai wadah fleksibel tingkat blok
grid Menampilkan elemen sebagai wadah kotak tingkat blok
inline-block Menampilkan elemen sebagai wadah blok tingkat sebaris. Elemen itu sendiri diformat sebagai elemen sebaris, tetapi Anda dapat menerapkan nilai tinggi dan lebar
inline-flex Menampilkan elemen sebagai wadah fleksibel tingkat sebaris
inline-grid Menampilkan elemen sebagai wadah kisi tingkat sebaris
inline-table Elemen ditampilkan sebagai tabel level sebaris
list-itemBiarkan elemen berperilaku seperti elemen <li>
run-in Menampilkan elemen sebagai blok atau inline, tergantung pada konteks
table Biarkan elemen berperilaku seperti elemen <table>
table-caption Biarkan elemen berperilaku seperti elemen <caption>
table-column-groupBiarkan elemen berperilaku seperti elemen <colgroup>
table-header-groupBiarkan elemen berperilaku seperti elemen <thead>
table-footer-group Biarkan elemen berperilaku seperti elemen <tfoot>
table-row-groupBiarkan elemen berperilaku seperti elemen <tbody>
table-cell Biarkan elemen berperilaku seperti elemen <td>
table-columnBiarkan elemen berperilaku seperti elemen <col>
table-row Biarkan elemen berperilaku seperti elemen <tr>
noneElemennya benar-benar dihapus
initialMenyetel properti ini ke nilai defaultnya.
inheritMewarisi properti ini dari elemen induknya.

Position
Nilai Keterangan
static Elemen HTML diposisikan statis secara default. Elemen posisi statis tidak terpengaruh oleh properti atas, bawah, kiri, dan kanan. Sebuah elemen dengan posisi: statis; tidak diposisikan dengan cara khusus; itu selalu diposisikan sesuai dengan aliran normal halaman
relative Sebuah elemen dengan posisi: relatif; diposisikan relatif terhadap posisi normalnya. Menyetel properti atas, kanan, bawah, dan kiri dari elemen yang posisinya relatif akan menyebabkannya disetel menjauh dari posisi normalnya. Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.
fixed Sebuah elemen dengan posisi: tetap; diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman di-scroll. Properti atas, kanan, bawah, dan kiri digunakan untuk memposisikan elemen. Elemen tetap tidak meninggalkan celah di halaman tempat elemen tersebut biasanya berada. Perhatikan elemen tetap di sudut kanan bawah halaman.
absolute Sebuah elemen dengan posisi: absolute; diposisikan relatif terhadap leluhur yang diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap). Namun; jika elemen yang diposisikan absolut tidak memiliki leluhur yang diposisikan, elemen tersebut menggunakan badan dokumen, dan bergerak bersama dengan pengguliran halaman. Catatan: Elemen posisi absolut dihilangkan dari aliran normal, dan elemen dapat tumpang tindih.
sticky Elemen dengan posisi: lengket; diposisikan berdasarkan posisi gulir pengguna. Elemen lengket beralih antara relatif dan tetap, tergantung pada posisi gulir. Itu diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).

Overflow
Nilai Keterangan
visibleKonten tidak terpotong, dan mungkin ditampilkan di luar kotak konten
hidden Konten terpotong - dan tidak ada mekanisme pengguliran yang disediakan
scroll Konten terpotong dan mekanisme pengguliran disediakan
auto Seharusnya menyebabkan mekanisme pengguliran disediakan untuk kotak yang meluap
initial Menyetel properti ini ke nilai defaultnya
inherit Mewarisi properti ini dari elemen induknya.