Setiap elemen di halaman web adalah kotak persegi panjang. Properti tampilan di CSS menentukan bagaimana kotak persegi panjang itu berperilaku. Hanya ada sedikit nilai yang biasa digunakan:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Nilai default untuk semua elemen adalah sebaris. Sebagian besar "Lembar Gaya Agen Pengguna" (gaya default yang diterapkan browser ke semua situs) mengatur ulang banyak elemen untuk "diblokir". Mari kita bahas masing-masing ini, dan kemudian membahas beberapa nilai yang kurang umum lainnya.
Di barisan
Nilai default untuk elemen. Pikirkan elemen seperti ,, atau dan bagaimana membungkus teks dalam elemen tersebut dalam string teks tidak merusak aliran teks.
The elemen memiliki perbatasan merah 1px. Perhatikan itu berada tepat sejajar dengan sisa teks.
Elemen sebaris akan menerima margin dan padding, tetapi elemen tersebut tetap sejajar seperti yang Anda harapkan. Margin dan padding hanya akan mendorong elemen lain menjauh secara horizontal, bukan vertikal.
Elemen sebaris tidak akan menerima heightdan width. Itu hanya akan mengabaikannya.
Blok Sebaris
Elemen yang disetel ke inline-blocksangat mirip dengan sebaris karena akan disetel sejajar dengan aliran teks alami (di "garis dasar"). Perbedaannya adalah Anda dapat menetapkan widthdan heightmana yang akan dihormati.
Blok
Sejumlah elemen diatur blockoleh stylesheet UA browser. Mereka biasanya elemen wadah, seperti , , dan
. Juga ketik "blok" seperti
dan
. Elemen level blok tidak duduk sejajar tetapi melewatinya. Secara default (tanpa menyetel lebar) mereka mengambil ruang horizontal sebanyak mungkin.
Dua elemen dengan batas merah adalah
s yang merupakan elemen level blok. The elemen dalam antara mereka tidak duduk inline karena blok memecah bawah elemen inline.
Run-in
Pertama, properti ini tidak berfungsi di Firefox. Dikatakan bahwa spesifikasi untuk itu tidak cukup didefinisikan dengan baik. Untuk mulai memahaminya, ini seperti jika Anda ingin elemen header duduk sejajar dengan teks di bawahnya. Mengambangnya tidak akan berfungsi dan begitu juga yang lain, karena Anda tidak ingin header menjadi anak dari elemen teks di bawahnya, Anda ingin itu menjadi elemen independennya sendiri. Di browser "pendukung", ini seperti ini:
Namun, jangan mengandalkannya.
Flexbox
The displayproperti juga digunakan untuk metode tata letak ketinggalan jaman baru seperti flexbox.
.header ( display: flex; )
Ada beberapa versi sintaks flexbox yang lebih lama, jadi silakan baca artikel ini untuk mengetahui sintaks dalam menggunakan flexbox dengan dukungan browser terbaik. Pastikan untuk melihat panduan lengkap untuk Flexbox ini.
Flow-Root
Nilai flow-roottampilan menciptakan "konteks pemformatan blok" baru, tetapi sebaliknya block. BFC baru membantu dengan hal-hal seperti membersihkan float, menghilangkan kebutuhan akan peretasan untuk melakukannya.
.group ( display: flow-root; )
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
Chrome
Firefox
YAITU
Tepi
Safari
58
53
Tidak
79
13
Ponsel / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Kotak
Tata letak kisi pada awalnya juga akan ditetapkan oleh properti tampilan.
body ( display: grid; )
Berikut panduan kami tentang tata letak Grid, yang mencakup bagan dukungan browser.
Tidak ada
Menghapus sepenuhnya elemen dari halaman. Perhatikan bahwa meskipun masih ada di DOM, elemen tersebut dihapus secara visual dan dengan cara lain yang memungkinkan (Anda tidak dapat memberi tab padanya atau turunannya, itu diabaikan oleh pembaca layar, dll).
Nilai Tabel
Ada seluruh rangkaian nilai tampilan yang memaksa elemen non-tabel untuk berperilaku seperti elemen tabel, jika Anda membutuhkannya. Ini jarang terjadi, tetapi terkadang memungkinkan Anda menjadi "lebih semantik" dengan kode Anda sambil memanfaatkan kekuatan pemosisian unik tabel.
