CSS - Sifat Paparan: Pintu ke Magik Visual!

Hai sana, para ahli CSS masa depan! ? Saya sangat gembira untuk memulakan perjalanan ini bersama anda sambil menjelajah dunia yang menarik sifat display CSS. Sebagai seseorang yang telah mengajar CSS selama lebih sepuluh tahun, saya dapat menjamin anda bahwa memahami sifat ini adalah seperti membuka peti harta karun kemungkinan reka bentuk web. Jadi, mari kita masuk ke dalam!

Apa Itu Sifat Paparan?

Sebelum kita masuk ke dalam hal-hal kecil, mari kita memahami apa yang dilakukan sifat display. Dalam istilah yang sederhana, ia mengawal bagaimana elemen ditampilkan di halaman web. Ber fikirkan ia seperti pengarah drama, memberitahu setiap pelakon (elemen) bagaimana mereka hendak berperanan di pentas (halaman web anda).

Nilai Yang Mungkin

Sifat display adalah seperti pisau瑞士 Army - ia mempunyai banyak alat (nilai) untuk situasi yang berbeza. Berikut adalah jadual nilai yang paling umum yang akan kita diskusi:

Nilai	Keterangan
inline	Menampilkan elemen sebagai elemen sebaris (seperti <span>)
block	Menampilkan elemen sebagai elemen blok (seperti <div>)
inline-block	Menampilkan elemen sebagai wadah blok aras sebaris
none	Elemen secara keseluruhan dihapuskan daripada dokumen
flex	Menampilkan elemen sebagai wadah fleks blok
inline-flex	Menampilkan elemen sebagai wadah fleks aras sebaris
grid	Menampilkan elemen sebagai wadah grid blok
inline-grid	Menampilkan elemen sebagai wadah grid aras sebaris
table	Biarkan elemen berperilaku seperti <table> elemen
list-item	Biarkan elemen berperilaku seperti <li> elemen

Terpakai Pada

Sifat display terpakai kepada semua elemen HTML. Ya, anda mendengar betul - semua mereka! Dari <span> yang biasa hingga <div> yang kuat, setiap elemen dapat dipengaruhi oleh sifat ini yang kuat.

Sintaks DOM

Bila bekerja dengan JavaScript dan Document Object Model (DOM), anda boleh mengubah suai sifat display seperti ini:

element.style.display = "value";

Sebagai contoh:

document.getElementById("myElement").style.display = "none";

Ini akan menyembunyikan elemen dengan ID "myElement". Itu seperti sihir, kan?

CSS display - nilai inline

Mari kita mulai dengan nilai inline. Ini adalah nilai default untuk elemen seperti <span>, <a>, dan <img>.

<style>
.inline-element {
display: inline;
background-color: kuning;
padding: 5px;
}
</style>

<pIni adalah paragraf dengan <span class="inline-element">elemen sebaris</span> di dalamnya.</p>

Dalam contoh ini, elemen <span> akan mengalir dengan teks, tidak memulakan di baris baru. Ia seperti kata dalam kalimat - ia tidak mengganggu aliran.

CSS display - nilai block

Berikutnya adalah nilai block. Ini adalah default untuk elemen seperti <div>, <p>, dan <h1> hingga <h6>.

<style>
.block-element {
display: block;
background-color: biru muda;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">Ini adalah elemen blok.</div>
<div class="block-element">Ini adalah elemen blok lain.</div>

Elemen blok memulakan di baris baru dan melebar ke keseluruhan lebar yang tersedia. Mereka seperti paragraf dalam buku - setiap satu memulakan di baris baru.

CSS display - nilai inline-block

Nilai inline-block adalah seperti campuran - ia menggabungkan ciri-ciri inline dan block.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: hijau muda;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Elemen ini akan duduk bersama-sama (seperti inline), tetapi anda boleh menetapkan lebar dan tinggi pada mereka (seperti block). Ia sempurna untuk membuat susun atur seperti grid tanpa menggunakan grid atau fleks sebenar.

CSS display - nilai none

Nilai none adalah seperti mantel kebalikan untuk elemen anda.

<style>
.hidden {
display: none;
}
</style>

<p>Anda boleh melihat paragraf ini.</p>
<p class="hidden">Tetapi anda tidak boleh melihat yang ini!</p>

Elemen dengan display: none sepenuhnya dihapuskan daripada susun atur. Ia seperti mereka tidak wujud di halaman sama sekali.

CSS display - nilai Dengan table

CSS boleh membuat elemen berperilaku seperti elemen-elemen table, walaupun mereka bukan tag <table> sebenar.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid hitam;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">Sel 1</div>
<div class="table-cell">Sel 2</div>
</div>
<div class="table-row">
<div class="table-cell">Sel 3</div>
<div class="table-cell">Sel 4</div>
</div>
</div>

Ini mencipta susun atur seperti table tanpa menggunakan tag table sebenar. Ia hebat untuk membuat susun atur yang perlu berperilaku seperti table tetapi dengan lebih fleksibiliti.

CSS display - nilai flex

Flexbox adalah alat susun atur yang kuat, dan ia dimulai dengan display: flex.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: abu-abu muda;
}
.flex-item {
background-color: putih;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Item Flex 1</div>
<div class="flex-item">Item Flex 2</div>
<div class="flex-item">Item Flex 3</div>
</div>

Ini mencipta wadah fleksibel dengan item yang dapat diatur dan didistribusikan dengan mudah. Ia seperti memiliki sekumpulan atlet yang dapat diperpanjang dan menyusut untuk menyesuaikan ruang mereka sempurna.

CSS display - nilai inline-flex

inline-flex adalah seperti flex, tetapi wadah itu sendiri berperilaku seperti elemen sebaris.

<style>
.inline-flex-container {
display: inline-flex;
background-color: pink muda;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: putih;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>

Ini membolehkan anda memiliki beberapa wadah fleksibel di sebaris, yang dapat berguna untuk membuat susun atur yang kompleks.

CSS display - nilai grid

Grid adalah alat susun atur yang kuat lain, dimulai dengan display: grid.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: biru muda;
padding: 10px;
}
.grid-item {
background-color: putih;
padding: 20px;
text-align: tengah;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid membolehkan anda mencipta susun atur kompleks dengan baris dan kolom. Ia seperti memiliki spreadsheet yang sempurna untuk elemen anda!

CSS display - nilai inline-grid

Seperti inline-flex, inline-grid mencipta wadah grid yang berperilaku seperti elemen sebaris.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: kuning muda;
padding: 10px;
}
.grid-item {
background-color: putih;
padding: 10px;
text-align: tengah;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

Ini membolehkan anda memiliki beberapa wadah grid di sebaris, membuka peluang susun atur yang banyak lagi.

CSS display - nilai list-item

Akhirnya, kita ada list-item, yang membuat elemen berperilaku seperti item senarai.

<style>
.custom-list {
display: list-item;
list-style-type: bujur;
margin-left: 20px;
}
</style>

<div class="custom-list">Ini adalah item senarai khusus</div>
<div class="custom-list">Ini adalah item senarai khusus lain</div>

Ini berguna saat anda ingin mencipta susun atur seperti senarai tanpa menggunakan tag <ul> atau <ol> sebenar.

Dan di situ kitapunya, teman-teman! Kita telah menjelajah melalui negeri display properti, dari yang biasa inline ke yang kuat grid. Ingat, kunci untuk memahami CSS adalah latihan. Jadi, pergi dan eksperimenkan dengan properti ini. Siapa tahu? Anda mungkin mencipta sesuatu yang besar dalam reka bentuk web!

Selamat coding, dan semoga susun atur anda selalu sempurna! ??

Credits: Image by storyset