Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de box-sizing özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

40 views

CSS'de box-sizing özelliği, bir öğenin boyutlandırılma şeklini kontrol eder. Bu özellik, bir öğenin genişlik ve yükseklik değerlerinin, sınırlayıcı çerçeve (border) ve dolgu (padding) boyutlarını içerip içermeyeceğini belirler. box-sizing özelliği ile, geliştiriciler daha tutarlı ve tahmin edilebilir bir şekilde öğe boyutlandırması yapabilirler.

box-sizing özelliğinin alabileceği iki ana değer vardır:

content-box: Bu varsayılan CSS kutu modelidir. Öğenin genişlik ve yükseklik değerleri, yalnızca içerik alanını kapsar. Sınırlayıcı çerçeve ve dolgu, belirtilen genişlik ve yüksekliğe eklenir, bu da öğenin aslında daha büyük bir alana yayılmasına neden olur. Yani, öğenin toplam genişliği = içerik genişliği + sol dolgu + sağ dolgu + sol çerçeve genişliği + sağ çerçeve genişliği ve benzer şekilde yükseklik için de geçerlidir.

Bu, her tarafında 2 piksel kenarlık ve 4 piksel dolgu bulunan 100 piksel × 100 piksel bir öğenin, 88 piksel × 88 piksel iç içerik alanıyla 100 piksel × 100 piksel olarak işleneceği anlamına gelir.

border-box: Bu değerle, öğenin genişlik ve yüksekliği, içerik alanının yanı sıra dolgu ve sınırlayıcı çerçeveyi de içerir. Bu, öğenin belirtilen boyutun ötesine geçmemesini sağlar, bu da düzen oluştururken tahmin etmeyi kolaylaştırır. Yani, belirttiğiniz genişlik ve yükseklik doğrudan öğenin dış kutusuna uygulanır, ve dolgu ile çerçeve iç bu boyutların içine dahil edilir.

 

Örnek kullanım:

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

Bu durumda, .box sınıfına sahip öğe, toplamda 100x100 piksel boyutunda olacaktır. border-box kullanıldığı için, dolgu ve çerçeve boyutları belirtilen genişlik ve yükseklik içinde hesaplanır. Eğer content-box kullanılsaydı, öğenin toplam genişliği ve yüksekliği dolgu ve çerçeveler dahil edilerek hesaplanırdı ve bu öğe daha büyük bir alana yayılırdı.

box-sizing özelliği, modern web tasarımında yaygın bir şekilde kullanılır çünkü daha öngörülebilir ve yönetilebilir bir kutu modeli sağlar, özellikle de çeşitli cihaz ve ekran boyutları için duyarlı tasarımlar oluşturulurken.

 

TailwindCSS:

Class
Properties
box-border box-sizing: border-box;
box-content box-sizing: content-box;

 

1.png

 

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...