CSS Dimensi dan Overflow
Halo teman-teman pada kesempatan ini saya akan membawakan materi tentang dimensi dan Overflow pada CSS, sebelum memulainya kita harus mengetahui dulu apa itu Dimensi dan Overflow yaitu Dimensi adalah Ukuran CSS (Dimensi) atribut memungkinkan kalian untuk mengontrol tinggi dan lebar dari elemen, sedangkan Overflow adalah properti yang dapat kita gunakan untuk menentukan suatu konten apakah nantinya konten akan ditambahkan scrollbar ketika konten yang terdapat pada elemen tidak cukup muat. Terdapat 4 nilai dari properti overflow yaitu : visible, hidden, scroll dan auto. Berikut contoh materi yang akan saya contohkan.
Buat html seperti dibawah lalu diberi class pada masing2 div
<body>
<div class="pertama">
<div class="kedua">Hello warga bumi</div>
</div>
</body>
Beri style pada masing2 class.
<style>
.pertama {
width: 300px;
height: 300px;
background-color: lightgreen;
}
.kedua {
width: 50%;
background-color: red;
}
</style>
Pada class pertama ukuran lebar dan tinggi berwarna hijau, lalu class kedua berwarna merah. Class merah memiliki lebar 50% yang berarti warna merah ini setengahnya dari warna hijau. Jika kita hapus ukuran lebar 50% maka warna merah dari class kedua akan mengikuti lebar dari warna hijau secara horizontal. Lalu jika warna hijau ukurannya kita tambah menjadi lebar, maka warna merah akan mengikuti ukuran setengah dari lebar hijau.
Contoh kasus ini adalah jika kita ingin ukuran lebar dan tingginya tetap tetapi kita tulisan yang dibuat melewati batas ukuran, Maka disinilah Overflow akan digunakan agar tulisan yang dibuat tidak melewati batas.
Tambahkan Overflow dengan value auto
<style>
div {
width: 200px;
height: 200px;
background-color: lightgreen;
overflow: auto;
}
</style>
Maka akan ada scroll untuk melihat semua tulisan yang tadinya melebihi ukuran warna hijau. Perlu diperhatikan bahwa value auto dan scroll berbeda. Kalau value auto tetap diterapkan pada styling walaupun tidak melebihi ukuran hijau maka fitur scroll akan hilang, sebaliknya. Jika value scroll tetap diterapkan sedangkan tulisan tidak melebihi ukuran hijau maka fitur scroll tetap ada.
Komentar
Posting Komentar