Bu yazımızda Css’te width, height, max-width, max-height, min-width, min-height özelliklerini öğreneceğiz. width özelliği ile Html etiketlerine genişlik değeri verirken, height özelliği ile yükseklik değeri verebiliriz.
Eğer biz bir etikete width ve height değeri vermezsek tarayıcı bu değerleri otomatik olarak ayarlar.
Bu değerleri px olarak verebildiğimiz gibi %(yüzde) olarak da verebiliriz. Yüzde olarak verildiğinde, ebeveyn etiketin değerlerine göre hesaplanır.
¡ Bir etiketin genişlik ve yükseklik değerine, padding margin ve border değerleri dahil değildir. Yani bir etiketin sayfada kapladığı yeri hesaplamak için genişlik veya yükseklik değerine, padding margin ve border değerleride eklenmelidir.
Örneğin bir <p> etiketi tanımlayalım ve 150px genişlik, 200px yükseklik değeri verelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> p{ width:150px; height:200px; border:1px solid black; } </style> <p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. </p> |
Şimdi de 2 <div> etiketi tanımlayalım ve içteki div’in genişliğine 70% değerini verelim.
Böylede ebeveyn div’in genişliğinin yüzde 70’i içteki div’e verilecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div{ padding:20px; border:2px solid black; } #box{ width:70%; } </style> <div> <div id="box"></div> </div> |
► max-width özelliği, bir etikete maksimum genişlik değeri vermek için kullanılır.
► max-height özelliği, bir etikete maksimum yükseklik değeri vermek için kullanılır.
► min-width özelliği, bir etikete minimum genişlik değeri vermek için kullanılır.
► min-height özelliği, bir etikete minimum yükseklik değeri vermek için kullanılır.
Bu özellikleri daha çok responsive tasarımlarda kullanırız.
Örneğin bir resmimiz var ve genişliğinin 1200px olduğunu varsayalım. Bu resmi tablet veya telefonda görüntülediğimizde ekrana sığmayacağı için scroll oluşacaktır.
Bu gibi sıkıntıları bu özellikler ile çözebiliriz. Resme max-width değeri olarak 200px verdiğimizi varsayalım. Bu durumda resim her cihazda maksimum 200px genişliğe sahip olacaktır.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
