Isi
Ini tengah malam, dan yang itu div di situs Anda masih terlihat seperti kotak mainan anak-anak. Semua elemennya berantakan, dan setiap kali Anda bermain dengan CSS layar properti, mereka mengatur ulang diri mereka sendiri menjadi sedikit omong kosong yang sama sekali berbeda.
Jika Anda seperti saya, Anda mungkin akan menyelesaikannya dengan bergumam pelan dan menjadi lebih agresif secara konsisten dengan keyboard Anda. Dan meskipun strategi tersebut telah berhasil untuk saya sebelumnya, saya baru-baru ini berusaha menemukan cara yang lebih baik untuk memahami layar Properti.
Ternyata dasar-dasar layar jauh lebih sederhana dari yang saya kira. Padahal, prinsip yang mereka gunakan sama seperti mengemas koper. Saya akan membahasnya tampilan: blok, blok-sebaris dan Di barisan. Jika sebelumnya Anda pernah menata koper dengan rapi, Anda akan melihat kesejajarannya. Jika Anda adalah tipe orang yang membongkar semua pakaian Anda dengan cara yang sembarangan - ya, hanya banyak yang bisa saya lakukan untuk Anda.
Koper kami akan berisi tiga jenis pakaian:
- Halus, seperti kemeja berkerah
- Kaos yang bisa digulung
- Kaus kaki atau pakaian dalam yang bisa dimasukkan ke dalam celah
Sebagai referensi, jika kita memodelkan koper dalam HTML, akan terlihat 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>
Item halus di atas
Tampilan: blok adalah default untuk sebagian besar elemen HTML. Itu berarti elemen tersebut menempati seluruh ruang horizontal di dalam wadahnya div. Jika berada di sebelah elemen saudara lainnya, itu akan memulai baris baru, dan tidak mengizinkan elemen lain pada barisnya. Ini mirip dengan barang halus yang Anda taruh di atas koper Anda. Ini adalah artikel yang halus atau cerdas seperti kemeja berkerah. Anda tidak ingin mereka kusut, jadi pastikan mereka tidak terdorong ke pakaian lain.
Tombol ini menampilkan salah satu bagian tersulit dari tampilan: blok. Perhatikan bagaimana kemeja berkerah tidak memenuhi seluruh lebar koper? Itu tidak berarti item lain akan naik ke levelnya. Misalkan kemeja ini 60 persen dari lebar koper; itu masih akan memblokir elemen lain untuk bergabung di tingkat atas.
Itulah mengapa ada garis batas oranye pada gambar. SEBUAH tampilan: blok elemen secara otomatis akan menambahkan margin di sekitarnya jika tidak menempati seluruh ruang horizontal.
T-shirt yang dikemas rapi
Sebagian besar koper Anda mungkin penuh dengan sisa pakaian Anda selama perjalanan. Demi kesederhanaan, kami akan memotongnya menjadi kaos saja. Ada perdebatan besar di internet tentang apakah melipat atau menggulung lebih efisien. Saya adalah tipe orang yang melipat.
Bagaimanapun, untuk memuat sebagian besar item, Anda mengatur T-shirt Anda berdampingan. Inilah tepatnya display: inline-block dimaksudkan untuk. Elemen-elemen ini bisa berdampingan di baris yang sama, begitu juga di samping display: inline elemen.
Tidak seperti display: inline elemen, sebuah blok-sebaris elemen akan pindah ke baris berikutnya jika tidak sesuai dengan isinya div di samping yang lain blok-sebaris elemen. Agar T-shirt tumpah ke baris berikutnya, Anda harus memotongnya menjadi dua dan menggunakan separuh sisanya untuk memulai baris baru. Blokir sebaris elemen tidak diperbolehkan untuk dibagi menjadi dua jika mereka tidak muat dalam satu garis.
Kaus kaki yang mengisi celah
Periksa kembali ke HTML asli dan Anda akan melihat bahwa ada satu kaus kaki div> di antara delapan T-shirt. Tapi coba lihat tampilan horizontal koper di sebelah kanan. Jika ada satu kaus kaki div>, bagaimana cara mengakhiri baris tengah dan memulai baris bawah? Inilah tujuan dari display: inline!
Sebuah Di barisan elemen akan tumpah ke baris berikutnya jika melebihi lebar div (dengan cara ini berbeda dari blok-sebaris atau blok). Sejak kaus kaki kami div penuh dengan kaus kaki yang dimasukkan secara sembarangan ke dalam celah, ini dapat dengan mudah mulai mengisi celah di sisi kanan baris tengah dan tumpah untuk memulai baris bawah.
Tidak ada kaus kaki yang perlu dipotong menjadi dua agar hal ini terjadi. Inilah mengapa mereka bisa menjadi Di barisan, sedangkan kaos hanya bisa blok-sebaris. Jika kaos di baris tengah hanya berukuran 60 persen dari lebarnya, maka kaus kaki itu div> akan naik untuk mengisi seluruh ruang di sisa baris.
Selamat jalan
Ini adalah CSS terakhir untuk koper kami:
.delicate {display: block; lebar: 60%; } .tshirt {display: inline-block; lebar: 20%; } .socks {display: inline; }
Berikut adalah beberapa skenario alternatif untuk mengilustrasikan penggunaan layar yang berbeda. Jika bahan halus di atas punya display: inline-block, mereka akan pas di samping T-shirt. Beberapa T-shirt akan naik ke garis atas, dan sisanya akan menyesuaikan. Tidak akan ada penyangga yang nyaman di kiri dan kanan kemeja berkerah.
Jika setiap T-shirt punya blok tampilan, Anda akan memiliki tumpukan besar T-shirt di atas satu sama lain, satu per baris. Jika kaus kaki punya display: inline-block, mereka semua akan duduk di baris paling bawah daripada mengalir di antara dua baris. Beberapa kaos akan didorong ke baris lain, membentuk baris keempat. Akan ada celah di sebelah kanan baris tengah kaos.
Dengan metode yang saya uraikan di sini, kita berakhir dengan koper yang dikemas rapi yang memanfaatkan ruang yang tersedia dengan sebaik-baiknya.
Artikel ini pertama kali tayang di majalah net masalah 289; beli disini!
