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 */
   }
   

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 */
   }
   

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 */
   }
   

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;
   }
   

   Kullanımı:

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

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.