Css ile Float , Display ve Overflown

Dostlar merhabalar, bu dersimizde Css ile ilgili 3 özellikten bahsedeceğiz. Bu özelliklerimiz Float, Display ve Overflown özellikleridir. Belirli bir Css bilgisine sahip olduğunuzu düşünerek ilk başlığımız olan Float ile başlayalım.

Css Float – Yaslama

Css Float özelliğimiz seçilen Html elementini sağa ya da sola yaslamak için kullanılır. Kullanımı ise oldukça basittir. Şimdi aşağıdaki örnek kodumuzu inceleyelim.

.resim1{
  float: right;
}

.resim2{
  float: left;
}

Yukarıda .resim1 elementimizi sağa, .resim2 elementimizi ise sola yasladık.

Css Display – Gösterme

Css Display özelliğimiz ise Html elementlerini block yada Inline olarak göstermek için kullanılır. Aşağıdaki örnek kodumuza bakarak kullanımı öğrenelim.

li {
  display: inline;
}

span {
  display: block;
}

Css Overflown – Taşma

Css Overflown özelliğimiz; bir taşma söz konusu olduğunda taşan kısmı gizlemek, taşan alanı kırpmak yada taşmış alana Scrool eklemek gibi işlevler için kullanılır. 4 paremetresi mevcuttur. Bunlar; Visible, hidden, Scroll ve Auto dur. Aşağıdaki örnek kodumuza bakarak nasıl kullanıldığını öğrenelim.

div {
  overflow: visible;
  overflow: hidden;
  overflow: scrool;
  overflow: auto;
}

Bu özelliğimiz daha çok taşan kısımları gizlemek için kullanılır. Bunu örnek ile kavrayalım. Aşağıdaki gibi Html elementimiz olsun. Div kutusuna sığmayacaktır.

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

Şimdi taşan kısımları overflown: hidden; ile gizleyelim.

div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}

İşte bu kadar kolay dostlar. Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares