CSS overflow (taşma) Özelliği Nedir ve Nasıl Kullanılır?
Türkçeye taşmak (overflow) olarak çevirdiğimiz CSS overflow özelliği sınırlarını belirlediğimiz kutu elemanının içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir.
Yapısı: overflow: <deger>
Aldığı Değerler: visible | hidden | scroll | auto | inherit
Başlangıç Değeri: visible
Uygulanabilen elemanlar: Blok seviyesinden elemanlar ve yerleştirilen elemanlara
Kalıtsallık: Yok
Özelliğe atanan değerleri tek tek inceleyelim.
· inherit – kalıtsallık üst elemanın değerini alabilir.
· visible – kutu sınırları dışına taşan alanları gösterir.
· hidden – kutu sınırları dışına tasan alanları gizler.
· scroll – kutu sınırlarını tasan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
· auto – kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.
Şimdi bir örnek ile taşma özelliğini gösterelim.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> overflow Özelliği </title>
<style>
div {
width: 200px;
height: 120px;
background: #bbbbbb;
border: 2px solid black;
overflow: visible;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">Ana sayfa</a></li>
<li><a href="">Digerleri</a></li>
<li><a href="">Digerleri</a></li>
<li><a href="">Digerleri</a></li>
<li><a href="">Digerleri</a></li>
<li><a href="">Digerleri</a></li>
<li><a href="">Digerleri</a></li>
</ul>
</div>
</body>
</html>
overflow özelliğinin değeri visible olduğu için içerik taşmasına rağmen taşan bölümler görülmektedir. Eğer overflow özelliğini hidden olarak verseydik siyah çerçevenin dışında kalan <li> etiketi içerisindeki “Diğerleri” yazıları görünmeyecekti. Bunu siz de deneyerek gözlemleyebilirsiniz.
CSS overflow (taşma) özellik konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
