Setiap elemen di laman web adalah kotak segi empat tepat. Properti paparan dalam CSS menentukan bagaimana kotak segi empat itu berkelakuan. Hanya ada segelintir 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 lalai untuk semua elemen adalah sebaris. Sebilangan besar "Lembaran Gaya Ejen Pengguna" (gaya lalai penyemak imbas berlaku untuk semua laman web) menetapkan semula banyak elemen untuk "menyekat". Mari kita perhatikan setiap perkara ini, dan kemudian nyatakan beberapa nilai lain yang tidak biasa.
Dalam barisan
Nilai lalai untuk elemen. Fikirkan elemen seperti , atau, dan bagaimana membungkus teks dalam unsur-unsur itu dalam rentetan teks tidak mematahkan aliran teks.
The elemen mempunyai 1px sempadan merah. Perhatikan ia betul-betul sejajar dengan teks yang lain.
Elemen sebaris akan menerima margin dan padding, tetapi elemen tetap duduk sebaris seperti yang anda jangkakan. Margin dan padding hanya akan menolak elemen lain secara mendatar, bukan secara menegak.
Unsur sebaris tidak akan menerima heightdan width. Ia hanya akan mengabaikannya.
Blok sebaris
Unsur yang disetel inline-blocksangat mirip dengan sebaris di dalamnya akan diselaraskan dengan aliran teks semula jadi (pada "garis dasar"). Perbezaannya ialah anda dapat menetapkan widthdan heightyang akan dihormati.
Sekat
Sejumlah elemen ditetapkan blockoleh lembaran gaya UA penyemak imbas. Mereka biasanya unsur-unsur bekas, seperti , dan
. Juga teks "blok" seperti
dan
. Elemen tahap blok tidak duduk sebaris tetapi melepasi mereka. Secara lalai (tanpa menetapkan lebar) mereka mengambil ruang mendatar sebanyak mungkin.
Dua elemen dengan sempadan merah adalah
s yang merupakan elemen tahap blok. The unsur di antara mereka tidak duduk dalam baris kerana blok memecahkan di bawah elemen sebaris.
Lari masuk
Pertama, harta tanah ini tidak berfungsi di Firefox. Kata adalah bahawa spesifikasi untuknya tidak cukup jelas. Untuk mula memahaminya, rasanya jika anda mahu elemen tajuk tetap sejajar dengan teks di bawahnya. Mengambang tidak akan berfungsi dan tidak akan ada yang lain, kerana anda tidak mahu tajuk menjadi anak elemen teks di bawahnya, anda mahu ia menjadi elemen bebasnya sendiri. Dalam penyemak imbas "menyokong", seperti ini:
Walaupun begitu, jangan bergantung.
Kotak Flex
Tempat displaypenginapan ini juga digunakan untuk kaedah susun atur baru seperti Flexbox.
.header ( display: flex; )
Terdapat beberapa versi sintaks flexbox yang lebih lama, jadi sila baca artikel ini untuk sintaks menggunakan flexbox dengan sokongan penyemak imbas terbaik. Pastikan anda melihat panduan lengkap untuk Flexbox ini.
Aliran-Akar
Yang flow-rootnilai paparan mewujudkan baru "blok pemformatan konteks", namun jika tidak suka block. BFC baru membantu dengan perkara seperti membersihkan apungan, menghilangkan keperluan untuk melakukan hacks.
.group ( display: flow-root; )
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
Chrome
Firefox
IE
Hujung
Safari
58
53
Tidak
79
13
Mudah Alih / Tablet
Android Chrome
Android Firefox
Android
Safari iOS
88
85
81
13.0-13.1
Grid
Susun atur grid juga pada awalnya akan ditetapkan oleh properti paparan.
body ( display: grid; )
Inilah panduan kami mengenai susun atur Grid, yang merangkumi carta sokongan penyemak imbas.
Tiada
Sepenuhnya membuang elemen dari halaman. Perhatikan bahawa semasa elemen tersebut masih ada di DOM, elemen tersebut dikeluarkan secara visual dan cara lain yang dapat difahami (anda tidak dapat mengetuknya atau anak-anaknya, elemen tersebut tidak diendahkan oleh pembaca skrin, dll.).
Nilai Jadual
Terdapat sekumpulan nilai paparan yang memaksa elemen bukan jadual berperilaku seperti elemen jadual, jika anda memerlukannya. Ini jarang berlaku, tetapi kadangkala memungkinkan anda menjadi "lebih semantik" dengan kod anda sambil menggunakan kekuatan kedudukan jadual yang unik.
