Kandungan
Sekarang tengah malam, dan yang itu div di laman web anda masih kelihatan seperti peti mainan kanak-kanak. Semua elemen adalah kekacauan, dan setiap kali anda bermain dengan CSS paparan harta benda, mereka menyusun semula menjadi omong kosong yang sama sekali berbeza.
Sekiranya anda seperti saya, anda mungkin akan menyelesaikannya dengan bergumam dan terus menjadi lebih agresif dengan papan kekunci anda. Walaupun strategi itu berjaya untuk saya sebelum ini, saya baru-baru ini berusaha untuk mencari cara yang lebih baik untuk memahami paparan harta benda.
Ternyata asas-asas paparan jauh lebih sederhana daripada yang saya sangka. Sebenarnya, mereka menggunakan prinsip yang sama seperti mengemas beg pakaian. Saya akan membuat liputan paparan: blok, sebaris-sebaris dan dalam barisan. Sekiranya anda telah menyusun beg pakaian dengan teratur sebelum ini, anda akan melihat selari itu. Sekiranya anda adalah jenis orang yang menaburkan semua pakaian anda secara tidak sengaja - baik, hanya ada banyak yang dapat saya lakukan untuk anda.
Beg pakaian kami akan mengandungi tiga jenis pakaian:
- Halus, seperti baju berkolar
- T-shirt yang boleh digulung
- Stoking atau seluar dalam yang boleh dimasukkan ke dalam celah
Sebagai rujukan, jika kita memodelkan koper dalam HTML, ia akan kelihatan seperti ini:
div class = 'suitcase'> div class = 'halus'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Barang-barang halus di atas
Paparan: blok adalah lalai untuk kebanyakan elemen HTML. Itu bermaksud elemen memenuhi seluruh ruang mendatar di dalam bekasnya div. Sekiranya ia berada di sebelah elemen saudara yang lain, ia akan memulakan baris baru, dan tidak membenarkan unsur lain berada pada barisnya. Ia serupa dengan barang-barang halus yang anda letakkan di bahagian atas beg pakaian anda. Ini adalah artikel halus atau pintar seperti baju berkolar. Anda tidak mahu mereka menjadi kusut, jadi anda memastikannya tidak terganggu dengan pakaian lain.
Ini memunculkan salah satu bahagian yang paling sukar paparan: blok. Perhatikan bagaimana baju berkolar tidak menempati keseluruhan beg pakaian? Itu tidak bermaksud item lain akan naik ke tahapnya. Katakan baju ini berukuran 60 peratus dari lebar beg pakaian; ia masih akan menyekat unsur-unsur lain daripada menyertainya di peringkat atas.
Itulah sebabnya terdapat sempadan oren dalam gambar. A paparan: blok elemen secara automatik akan menambahkan margin di sekelilingnya jika tidak memenuhi seluruh ruang mendatar.
T-shirt yang kemas
Sebilangan besar beg pakaian anda mungkin penuh dengan pakaian anda yang lain untuk perjalanan anda. Demi kesederhanaan, kami akan memotongnya hanya dengan kemeja-T. Terdapat perdebatan besar di internet mengenai apakah lipatan atau penggulungan lebih berkesan. Saya jenis orang yang lipat.
Bagaimanapun, agar sesuai dengan item yang paling banyak, anda menyusun kemeja-T anda berdampingan. Ini betul-betul apa paparan: blok sebaris dimaksudkan untuk. Unsur-unsur ini boleh duduk di sebelah satu sama lain pada baris yang sama, dan juga di sebelah paparan: sebaris unsur.
Tidak seperti paparan: sebaris unsur, sebuah sebaris-sebaris elemen akan bergerak ke baris seterusnya jika tidak sesuai dengan yang terdapat di dalamnya div bersama yang lain sebaris-sebaris unsur. Untuk mendapatkan kemeja-T tumpah ke baris berikutnya, anda perlu memotongnya menjadi separuh dan menggunakan separuh yang tersisa untuk memulakan baris baru. Sekatan sebaris unsur-unsur tidak boleh dibelah dua jika tidak sesuai dengan garis.
Stoking yang mengisi jurang
Lihat semula HTML asal dan anda akan perhatikan bahawa ada satu stoking div> antara lapan kemeja-T. Tetapi lihatlah pandangan mendatar beg pakaian di sebelah kanan. Sekiranya ada satu stoking div>, bagaimana cara mengakhiri baris tengah dan memulakan baris bawah? Ini adalah tujuan untuk paparan: sebaris!
Seorang dalam barisan elemen akan tumpah ke baris seterusnya jika melebihi lebar div (dengan cara ini berbeza dengan sebaris-sebaris atau sekatan). Sejak stoking kami div penuh dengan stoking yang secara tidak sengaja disumbat ke dalam celah, ia dapat dengan mudah mulai mengisi jurang di sebelah kanan baris tengah dan tumpah untuk memulakan baris bawah.
Stoking tidak perlu dipotong separuh untuk perkara ini berlaku. Inilah sebabnya mengapa mereka boleh menjadi dalam barisan, sedangkan kemeja-T hanya boleh sebaris-sebaris. Sekiranya kemeja-T di barisan tengah hanya mengambil lebar 60 peratus, kaus kaki div> akan bergerak ke atas untuk mengisi seluruh ruang di barisan yang lain.
Pelayaran Bon
Ini adalah CSS terakhir untuk beg pakaian kami:
.dekat {paparan: blok; lebar: 60%; } .tshirt {display: inline-block; lebar: 20%; } .socks {display: sebaris; }
Berikut adalah beberapa senario alternatif untuk menggambarkan penggunaan paparan yang berbeza. Sekiranya makanan istimewa di atas ada paparan: blok sebaris, mereka sesuai dengan baju T-shirt. Sebilangan kemeja-T akan bergerak ke garis atas, dan selebihnya akan disesuaikan. Tidak akan ada penyangga yang selesa di kiri dan kanan baju berkolar.
Sekiranya setiap kemeja-T mempunyai paparan-blok, anda akan mempunyai banyak kemeja T di atas satu sama lain, satu per barisan. Sekiranya stoking mempunyai paparan: blok sebaris, mereka semua akan duduk di barisan bawah daripada mengalir di antara dua baris. Beberapa kemeja-T akan didorong ke baris lain, membentuk garis keempat. Terdapat jurang di sebelah kanan barisan T-shirt tengah.
Dengan kaedah yang telah saya gariskan di sini, kami berakhir dengan beg pakaian kemas yang memanfaatkan ruang yang ada dengan sebaik-baiknya.
Artikel ini mula-mula muncul di majalah bersih terbitan 289; beli di sini!
