Box-Sizing: Content-Box ve Border-Box
box-sizing özelliğinin genişlik ve yükseklik hesaplamalarında iç boşluk ile kenarlığın nasıl dikkate alındığını değiştirdiğini anlayın.
Box-Sizing: Content-Box ve Border-Box, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
box-sizing Sorunu
Varsayılan olarak CSS, width değerini yalnızca içerik alanına uygular. İç dolgu veya kenarlık eklemek, öğenin gerçekte görüntülenen boyutunu artırır; bu durum kafa karıştırıcı ve hataya açıktır.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Varsayılan)
box-sizing: content-box varsayılandır. width ve height yalnızca içeriğe uygulanır. Dolgu ve kenarlık bunların üzerine eklenerek öğenin belirlenen boyutları aşmasına neden olur.
border-box
box-sizing: border-box kullanıldığında width ve height, içerik + dolgu + kenarlık değerlerini içerir. Dolgu veya kenarlık ne olursa olsun öğe, bildirilen boyutta tam olarak kalır.
<div class="box">Exactly 200px rendered width</div>
Evrensel border-box Sıfırlaması
Evrensel olarak önerilen sıfırlamayı kullanarak border-box değerini genel olarak uygulayın:
<div class="demo-box">Width stays exactly 200px</div>
* Yerine inherit Kullanılmasının Nedeni
Alternatif bir yaklaşım, gerektiğinde bileşenlerin box-sizing değerini geçersiz kılmasına olanak tanır:
<div class="demo-box">Inherited border-box sizing</div>
Yüzde Genişlik + Dolgu
border-box modelinin en önemli pratik faydası, yüzde cinsinden genişliklerde görülür. width: 50% ve 20px dolgulu bir öğe, taşma olmadan üst öğesinin tam olarak %50'si boyutunda kalır.
<div class="col">50% wide column with padding, no overflow</div>
border-box margin Değerini İçermez
border-box kullanılsa bile dış boşluk bildirilen genişliğe dahil edilmez. Dış boşluklar, belirlenen boyutlara ek olarak her zaman öğenin dışında yer kaplar.
Geçmiş: content-box Neden Varsayılandır?
Geçmişte tarayıcılar kutu modeli konusunda farklı davranıyordu. W3C, content-box modelini standartlaştırırken IE, border-box kullanıyordu. Modern CSS, W3C uyumluluğu için varsayılan olarak content-box kullanır; ancak neredeyse tüm projeler bunu border-box olarak geçersiz kılar.
DevTools'ta Kutu Modelini İnceleme
Chrome DevTools'taki Elements paneli, içerik, dolgu, kenarlık ve dış boşluk boyutlarını kesin olarak gösteren bir kutu modeli şeması sunar. Boyutlandırma sorunlarını ayıklamanın en hızlı yolu budur.
Grid ve Flexbox Dahili Olarak border-box Kullanır
CSS Grid ve Flexbox, öğenin kendi box-sizing ayarından bağımsız olarak izleri ve öğeleri her zaman border-box kurallarına göre boyutlandırır. Bu, boyutlandırma hesaplamalarının öngörülebilir olmasını sağlar.
border-box ile min/max
min-width, max-width, min-height ve max-height, border-box etkinken dolgu ile kenarlığı içermeleri bakımından width ile aynı şekilde çalışır.
Kısa Kontrol
box-sizing: border-box kullanıldığında, width: 300px; padding: 30px; olarak bildirilen bir öğenin içerik alanı genişliği kaç olur?
Özet
box-sizing: border-box, dolguyu ve kenarlığı bildirilen genişliğe dahil ederek beklenmedik boyut artışlarını önler. Bunu *, *::before, *::after { box-sizing: border-box } ile genel olarak uygulayın. Dış boşluklar hiçbir kutu modeline dahil edilmez.
Sıkça Sorulan Sorular
“Box-Sizing: Content-Box ve Border-Box” dersi ücretsiz mi?
Evet — “Box-Sizing: Content-Box ve Border-Box” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Box-Sizing: Content-Box ve Border-Box” dersinde ne öğreneceğim?
box-sizing özelliğinin genişlik ve yükseklik hesaplamalarında iç boşluk ile kenarlığın nasıl dikkate alındığını değiştirdiğini anlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Box-Sizing: Content-Box ve Border-Box” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama
- Kenarlık Stilleri, Genişliği ve Rengi
- Box-Sizing: Content-Box ve Border-Box
- Outline ve Box-Shadow