CSS Kutu Davranışının Değiştirilmesi

CSS kutu modelinin davranışını değiştirmek için birkaç özellik bulunmaktadır. Bu özellikler, öğelerin içeriği ve sınırları arasındaki ilişkiyi kontrol etmek için kullanılır. İşte bazı temel özellikler:

1. Box-Sizing Özelliği:

   • box-sizing özelliği, bir öğenin genişliğini ve yüksekliğini belirlerken içeriği ve dolaylı içeriği (padding ve sınır) içerecek şekilde kutu modelini değiştirir.

   div { box-sizing: border-box; /* İçeriği ve dolaylı içeriği içerecek şekilde kutu modeli */ } 

   Canlı Dene Kopyala

2. Overflow Özelliği:

   • overflow özelliği, bir öğenin içeriği sınırlarını aştığında ne olacağını belirler. visible, hidden, scroll, ve auto gibi değerleri alabilir.

   div { overflow: hidden; /* İçeriği sınırları içinde tutar ve taşan kısmı keser */ } 

   Canlı Dene Kopyala

3. Float Özelliği:

   • float özelliği, bir öğeyi normal akıştan çıkararak, diğer öğelerin etrafında yüzmelerini sağlar.

   img { float: left; /* Resmi sola yatık hale getirir ve metin sağında akar */ } 

   Canlı Dene Kopyala

4. Clearfix Tekniği:

   • Sayfadaki yüzen öğelerden kaynaklanan düzen sorunlarını düzeltmek için kullanılan bir tekniktir. clear özelliği ile birleştirilir.

   .clearfix::after { content: ""; display: table; clear: both; } 

   Canlı Dene Kopyala

   Kullanımı:

   .container { overflow: auto; } .clearfix::after { content: ""; display: table; clear: both; } 

   Canlı Dene Kopyala

Bu özellikler, öğelerin kutu modeli davranışını kontrol etmek ve sayfanın düzenini düzgün bir şekilde yönetmek için kullanılır. Her bir özellik, belirli bir davranışı değiştirmek için tasarlanmıştır ve ihtiyacınıza bağlı olarak kullanabilirsiniz.