Artikel ini menunjukkan penggunaan sifat limpahan-y CSS dengan banyak contoh.
Bagaimana untuk Menggunakan Harta Limpahan-y dalam CSS?
CSS ' limpahan-y ” harta digunakan untuk mengawal limpahan kandungan di sepanjang paksi silang dalam elemen. Ia menentukan sama ada untuk klip kandungan atau menambah bar skrol apabila kandungan melebihi ketinggian bekas. Nilai yang mungkin untuk harta ini ialah “ nampak ”, “ tersembunyi ”, “ tatal ”, dan “ auto ”.
Mari kita lawati contoh di bawah untuk demonstrasi yang lebih baik bagi sifat limpahan-y:
Contoh 1: Menggunakan Visible sebagai Nilai Untuk Harta Limpahan-y
' nampak nilai ” membenarkan kandungan melimpah dari bekas dan tidak menambah sebarang keratan atau bar skrol. Lawati blok kod praktikal di bawah:
>
>
Penerangan blok kod di atas:
- Pertama, tetapkan nilai ' ibu bapa ' kepada ' kelas atribut ' dan gunakan ' gaya ” atribut.
- Di samping itu, berikan nilai ' nampak 'kepada CSS' limpahan-y ” harta benda. Dan tetapkannya sama dengan ' gaya ” atribut untuk membuat penggayaan CSS berfungsi.
- Seterusnya, buat ' bersarang ' div elemen ” dan berikannya kelas “ kandungan kanak-kanak ”. Juga, berikan data tiruan kepadanya.
Sekarang, gunakan sifat CSS untuk meningkatkan visualisasi yang membantu dalam pemahaman yang lebih baik tentang sifat limpahan-y CSS:
.ibu bapa {lebar : 200px ;
ketinggian : 150px ;
sempadan : 1px padu hitam ;
}
.kanakKandungan {
ketinggian : 300px ;
warna latar belakang : biru muda ;
}
Perihalan sifat CSS diberikan di bawah:
- Pertama, ' ibu bapa kelas ” dipilih dan nilai “ 200px ”, “ 150px ”, dan “ 1px hitam pejal ' diberikan kepada CSS ' lebar ”, “ ketinggian ”, dan “ sempadan ” hartanah, masing-masing.
- Seterusnya, pilih “ kandungan kanak-kanak ” kelas dan tetapkan nilai “ 300px ” dan “ biru muda 'kepada CSS' ketinggian ” dan “ warna latar belakang ” hartanah, masing-masing. Kelas ini diperluaskan kepada “ ibu bapa 'kelas yang dikawal oleh CSS' melimpah ” harta benda.
Selepas penyusunan coretan kod, halaman web kelihatan seperti ini:
Syot kilat memaparkan kandungan limpahan telah kelihatan dan bar skrol atau keratan tidak ditambahkan secara lalai.
Contoh 2: Menggunakan Tersembunyi sebagai Nilai Untuk Harta Limpahan-y
' limpahan-y ” harta dengan nilai “ tersembunyi ” menyembunyikan semua kandungan yang bergerak di luar bekas induknya. Sifat ini tidak menambah bar skrol sebaliknya memotong kandungan yang melimpah:
>
>
Coretan kod di atas mengandungi:
- Mula-mula, kod yang sama dimasukkan semula dengan penambahan kandungan dummy yang diletakkan di dalam elemen div dalam.
- Seterusnya, tukar nilai “ limpahan-y ” harta kepada “ tersembunyi ' kepada ' teg ' mempunyai kelas ' ibu bapa ”.
Selepas memaparkan semula halaman web kelihatan seperti ini:
Syot kilat memaparkan bahawa kandungan limpahan telah dipotong.
Contoh 3: Menggunakan Tatal sebagai Nilai Untuk Harta Limpahan-y
Menetapkan nilai ' limpahan-y ” harta kepada “ tatal ” membolehkan pengguna akhir menatal melalui
kandungan yang melimpahinya. Marilah kita melawat blok kod di bawah:
= 'ibu bapa' gaya = 'overflow-y: tatal;' >
= 'Kandungan kanak-kanak' > Ini hanya tiruan kandungan digunakan untuk menunjukkan sifat limpahan-y apabila ia ditetapkan kepada kelihatan. Ini hanya tiruan kandungan digunakan untuk menunjukkan sifat limpahan-y apabila ia ditetapkan kepada kelihatan.
>
>Dalam blok kod di atas:
- Pertama, struktur HTML yang sama telah dimasukkan ke dalam '
” tag. - Seterusnya, tukar nilai “ limpahan-y ” harta kepada “ tatal ”. Ini membolehkan ' ibu bapa ” div untuk membolehkan kesan tatal mengawal kandungan yang melimpah.
Selepas penyusunan blok kod di atas, halaman web kelihatan seperti ini:
Gi di atas menggambarkan bahawa kesan menatal telah tersedia untuk mengawal kandungan yang melimpah.
Contoh 4: Menggunakan Auto sebagai Nilai Untuk Harta Limpahan-y
Dalam contoh ini, pengguna boleh menambah bar skrol hanya jika kandungan tidak muat dalam bekas. Selain itu, jika kandungan tidak melimpah, bar skrol tidak akan ditambah. Ia boleh dilakukan dengan memberikan nilai ' auto 'kepada CSS' limpahan-y ” harta:
= 'ibu bapa' gaya = 'overflow-y: auto;' >
= 'Kandungan kanak-kanak' > Ini hanya tiruan kandungan digunakan untuk menunjukkan sifat limpahan-y apabila ia ditetapkan kepada kelihatan. Ini hanya tiruan kandungan digunakan untuk menunjukkan sifat limpahan-y apabila ia ditetapkan kepada kelihatan.
>
>Dalam blok kod di atas:
- Pertama, masukkan fail HTML yang sama di dalam '
” tag. - Seterusnya, kemas kini nilai ' limpahan-y ” harta kepada “ auto ”. Ia membolehkan kesan menatal berbanding dengan panjang menegak kandungan.
Selepas tamat proses penyusunan, halaman web berfungsi seperti ini:
Gif di atas memaparkan sifat limpahan yang telah mendayakan bar skrol mengikut panjang kandungan.
Kesimpulan
CSS ' limpahan-y ” harta digunakan untuk mengawal kandungan limpahan sepanjang paksi silang dalam elemen. Sifat limpahan-y mengawal kandungan mengikut nilai khusus yang diberikan kepada sifat limpahan-y. ' visual nilai ' memaparkan kandungan yang melimpah, ' tersembunyi nilai ” menyembunyikan kandungan limpahan, dan “ tatal ” nilai menambah bar skrol untuk mengawal kandungan. Dan jika nilainya ialah ' auto ” bar skrol menambah atau mengalih keluar mengikut panjang kandungan.
- Pertama, struktur HTML yang sama telah dimasukkan ke dalam '