Memahami Properti Tampilan CSS

Sep 14, 2025

Bagaimana caranya

Ini tengah malam, dan yang itu jaman Di situs Anda masih terlihat seperti peti mainan anak. Semua elemen adalah kekacauan yang campur aduk, dan setiap kali Anda bermain CSS. S. display. Properti, mereka mengatur ulang diri mereka menjadi sedikit omong kosong yang sama sekali berbeda.

Jika Anda seperti saya, Anda mungkin akan menyelesaikan ini dengan bergumam di bawah napas dan menjadi konsisten lebih agresif dengan keyboard Anda. Dan meskipun strategi itu telah bekerja untuk saya sebelumnya, saya baru-baru ini berangkat untuk menemukan cara yang lebih baik untuk memahami display. Properti.

Ternyata dasar-dasar display. jauh lebih sederhana daripada yang saya pikirkan. Bahkan, mereka menggunakan prinsip yang sama dengan mengemas koper. Saya akan membahas Tampilan: Blokir , inline-block. dan Di barisan . Jika Anda telah mengatur koper dengan teratur sebelumnya, Anda akan melihat paralel. Jika Anda adalah tipe orang yang menabrak semua pakaian Anda dengan cara yang serampangan - yah, hanya ada begitu banyak yang bisa saya lakukan untuk Anda.

Koper kami akan berisi tiga jenis pakaian:

Tidur, seperti kemeja berkerah
T-shirt yang bisa digulung
Kaus kaki atau pakaian dalam yang dapat diisi menjadi celah

Untuk referensi, jika kami memodelkan koper di HTML, akan terlihat seperti ini:

 & lt; div class = 'koper' & gt;
    & lt; div class = 'delicate' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'socks' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
& lt; / div & gt;

Item halus di atas

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Kemeja berkerah duduk di atas tumpukan pakaian di bawahnya. Ini adalah satu-satunya item yang menempati layernya sendiri

Tampilan: Blokir adalah default untuk sebagian besar elemen HTML. Itu berarti elemen menempati seluruh ruang horizontal dalam wadahnya jaman . Jika di sebelah elemen saudara kandung lainnya, itu akan memulai baris baru, dan tidak memungkinkan elemen lain pada barisnya. Ini mirip dengan item halus yang Anda letakkan di bagian atas koper Anda. Ini adalah artikel halus atau pintar seperti kemeja berkerah. Anda tidak ingin mereka keriput, jadi Anda memastikan mereka tidak didorong melawan pakaian lain.

Ini memunculkan salah satu bagian terberat dari Tampilan: Blokir . Perhatikan bagaimana kemeja berkerah tidak menempati seluruh lebar koper? Itu tidak berarti barang-barang lain akan melompat ke levelnya. Katakanlah kemeja ini adalah 60 persen dari lebar koper; Masih akan memblokir elemen lain dari bergabung dengannya di tingkat atas.

Itu sebabnya ada perbatasan oranye dalam gambar. SEBUAH Tampilan: Blokir Elemen akan secara otomatis menambahkan margin di sekitarnya jika tidak menempati seluruh ruang horizontal.

Kaos yang dikemas dengan rapi

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Di sini kita dapat melihat barisan t-shirt atas dan bawah, dengan empat kemeja di masing-masing

Sebagian besar koper Anda mungkin penuh dengan sisa pakaian Anda untuk perjalanan Anda. Demi kesederhanaan, kita akan memotong ini untuk hanya kaos. Ada perdebatan besar di Internet apakah lipat atau bergulir lebih efisien. Saya tipe lipat orang.

Bagaimanapun, agar sesuai dengan barang terbanyak, Anda berbaris t-shirt berdampingan. Ini persis apa Tampilan: blok inline dimaksudkan untuk. Elemen-elemen ini dapat duduk di samping satu sama lain di baris yang sama, serta di sebelah Tampilan: inline. elemen.

Tidak seperti Tampilan: inline. elemen, dan inline-block. elemen akan pindah ke baris berikutnya jika tidak sesuai dengan yang berisi jaman di samping yang lain inline-block. elemen. Untuk memiliki tumpahan kaos ke baris berikutnya, Anda harus memotongnya menjadi dua dan menggunakan setengah sisanya untuk memulai baris baru. Inline-block. Elemen tidak diperbolehkan dibagi menjadi dua jika mereka tidak cocok pada garis.

Kaus kaki yang mengisi celah

The socks are inline elements, which means they will fill the gaps around the T-shirts — Kaus kaki adalah elemen inline, yang berarti mereka akan mengisi celah di sekitar t-shirt

Periksa kembali ke HTML asli dan Anda akan mencatat bahwa ada satu kaus kaki & lt; div & gt; antara delapan t-shirt. Tetapi lihatlah pandangan horizontal dari koper di sebelah kanan. Jika ada satu kaus kaki & lt; div & gt; , Bagaimana itu bisa mengakhiri baris tengah dan memulai baris bawah? Ini adalah tujuan dari Tampilan: inline. !

Sebuah Di barisan elemen akan tumpah ke baris berikutnya jika melebihi lebar jaman (Dengan cara ini berbeda dari inline-block. atau blok ). Sejak kaus kaki kami jaman Penuh dengan kaus kaki yang secara sembarangan dimasukkan ke dalam celah, itu dapat dengan mudah mulai mengisi celah di sisi kanan baris tengah dan tumpah untuk memulai baris bawah.

Tidak ada kaus kaki yang perlu dipotong setengah untuk ini terjadi. Inilah sebabnya mereka bisa menjadi Di barisan , sementara t-shirt hanya bisa inline-block. . Jika kaos di baris tengah hanya mengambil 60 persen dari lebar, kaus kaki & lt; div & gt; akan naik untuk mengisi seluruh ruang pada sisa baris.

Selamat jalan

Ini adalah CSS terakhir untuk koper kami:

 .Dicate {
    Tampilan: blok;
    Lebar: 60%;
}

.tshirt {
    Tampilan: blok inline;
    Lebar: 20%;
}

.kaus kaki{
    Tampilan: inline;
}

Berikut adalah beberapa skenario alternatif untuk mengilustrasikan berbagai penggunaan tampilan. Jika delicates di atas sudah Tampilan: blok inline , mereka akan cocok di samping kaos. Beberapa t-shirt akan naik ke garis atas, dan sisanya akan menyesuaikan sesuai. Tidak akan ada buffer yang nyaman di sebelah kiri dan kanan kemeja berkerah.

Jika setiap t-shirt punya tampilan-blok. , Anda akan memiliki tumpukan kaos besar di atas satu sama lain, satu per baris. Jika kaus kaki punya Tampilan: blok inline , mereka semua akan duduk di baris bawah daripada mengalir di antara dua baris. Beberapa kaos akan didorong ke baris lain, membentuk baris keempat. Akan ada celah di kanan baris tengah t-shirt.

Dengan metode yang saya uraikan di sini, kami berakhir dengan koper yang dikemas dengan rapi yang memanfaatkan ruang terbaik yang tersedia.

Artikel ini awalnya muncul di Net Magazine. masalah 289; Beli di sini !

Artikel terkait:

5 sumber daya terbaik untuk mempelajari HTML dan CSS
Bangun tata letak kompleks dengan Postcss-Flexbox
28 Contoh Luar Biasa CSS

Memahami Properti Tampilan CSS

Item halus di atas

Kaos yang dikemas dengan rapi

Kaus kaki yang mengisi celah

Selamat jalan

Bagaimana caranya - Artikel Terpopuler

Cara memposting ulang di Instagram

Buat seni animasi CSS

Cara Membuat Ikon Aplikasi di Illustrator

Putar ilustrasi 2D ke dalam seni 3D

Prototipe sempurna dan desain hand-off dengan Marvel

Cara memengaruhi peringkat Google dengan konten Anda

Cara kode penanda augmented reality

Cara merancang antarmuka seluler yang ramah pengguna

Kategori