Tahukah Anda cara menggunakan atribut CSS overflow? Mari perkenalkan kepada Anda secara detail! Kami telah mengumpulkan beberapa pengalaman dan ingin membaginya dengan Anda.
Nilai properti luapan CSS :
1. terlihat: Nilai default, konten tidak akan dipangkas dan akan disajikan di luar kotak elemen;
2. tersembunyi: Konten akan dipangkas dan konten lainnya tidak akan terlihat;
3. gulir: Konten akan dipangkas, tetapi browser akan menampilkan bilah gulir untuk melihat konten lainnya;
4. otomatis: Jika konten dipangkas, browser akan menampilkan bilah gulir untuk melihat konten lainnya;
Ada juga dua sifat saudara overflow, overflow-y dan overflow-x, yang jarang digunakan. Mari kita lihat masing-masing nilai ini dan diskusikan penggunaan dan teknik umum.
(1) Otomatis
Nilai otomatis overflow sangat mirip dengan gulir. Satu-satunya hal yang dipecahkannya adalah masalah bilah gulir yang muncul saat Anda tidak membutuhkannya.
(2) Tersembunyi
Nilai kebalikan dari nilai default yang terlihat disembunyikan. Itu akan menyembunyikan segala sesuatu di luar kotak. Ini sangat berguna untuk menangani konten dinamis yang mungkin menyebabkan beberapa masalah tata letak karena konten meluap. Namun, harap diingat bahwa konten yang disembunyikan menggunakan metode ini tidak akan terlihat sama sekali (kecuali Anda melihat kode sumbernya). Misalnya, jika beberapa pengguna menyetel font default browser mereka menjadi lebih besar dari yang Anda inginkan, Anda akan memasukkan beberapa teks ke luar kotak dan menyembunyikannya sepenuhnya.
(3) Terlihat
Jika Anda tidak mengatur atribut overflow, nilai atribut overflow default akan terlihat. Jadi secara umum, tidak ada alasan untuk secara khusus menyetel properti overflow menjadi terlihat kecuali Anda ingin mengganti nilai yang disetel ke tempat lain. Hal penting yang perlu diingat di sini adalah meskipun konten di luar kotak terlihat, konten tersebut tidak mempengaruhi alur kerja halaman. Secara umum, Anda setidaknya tidak perlu menyetel ketinggian tetap untuk kotak yang isinya berupa teks, sehingga Anda tidak akan menghadapi situasi ini.
(4) Gulir
Menyetel nilai luapan kotak ke gulir akan menyembunyikan konten yang ditampilkan di luar kotak, namun akan menyediakan bilah gulir untuk menggulir di dalam kotak sehingga konten lainnya dapat dilihat. Perlu dicatat bahwa menggunakan gulir akan menghasilkan bilah gulir horizontal dan vertikal secara bersamaan, meskipun konten hanya memerlukan salah satunya.
Contoh: Menggunakan nilai atribut Terlihat dan Tersembunyi
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible: Nilai default, konten yang meluap tidak akan diproses, dan konten akan ditampilkan di luar area konten elemen ; <br>tersembunyi: Sembunyikan konten area konten elemen luapan; <br>gulir: Sembunyikan konten area konten elemen luapan, dan buat bilah gulir di kiri dan bawah elemen elemen dalam elemen dengan menggeser bilah gulir. Konten;<br>otomatis: Jika terjadi luapan konten, bilah gulir akan dibuat di sisi kiri elemen. Anda dapat melihat semua konten dalam elemen dengan menggeser bilah gulir ;<br>mewarisi: Mewarisi nilai atribut overflow dari elemen induk. </div><divclass=scroll>terlihat: Nilai default, konten yang meluap tidak akan diproses, dan konten akan ditampilkan di luar area konten elemen;<br>tersembunyi: Menyembunyikan konten dari area konten elemen yang meluap;<br >scroll: Menyembunyikan konten di area konten elemen overflow, dan membuat bilah gulir di sisi kiri dan bawah elemen. Anda dapat melihat semua konten di elemen dengan menggeser bilah gulir;<br> otomatis: Jika terjadi luapan konten, itu akan berada di sisi kiri elemen. Buat bilah gulir, dan Anda dapat melihat semua konten dalam elemen dengan menggeser bilah gulir;<br>mewarisi: mewarisi nilai luapan. atribut dari elemen induk. </div><divclass=auto>terlihat: Nilai default, konten yang meluap tidak akan diproses, dan konten akan ditampilkan di luar area konten elemen;<br>tersembunyi: Menyembunyikan konten dari area konten elemen yang meluap;<br >scroll: Menyembunyikan konten di area konten elemen overflow, dan membuat bilah gulir di sisi kiri dan bawah elemen. Anda dapat melihat semua konten di elemen dengan menggeser bilah gulir;<br> otomatis: Jika terjadi luapan konten, itu akan berada di sisi kiri elemen. Buat bilah gulir, dan Anda dapat melihat semua konten dalam elemen dengan menggeser bilah gulir;<br>mewarisi: mewarisi nilai luapan. atribut dari elemen induk. </div></tubuh></html>Hasil berjalan:
