The CSS Podcast - 001: The Box Model
Şu HTML kodunuz olduğunu varsayalım:
<p>I am a paragraph of text that has a few words in it.</p>
Ardından, bu öğe için şu CSS'yi yazarsınız:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
İçerik, belirttiğiniz 100 piksel yerine 142 piksel genişliğinde oluyor ve öğenizin dışına çıkıyor. Bunun nedeni nedir?
Kutu modeli, CSS'nin temelini oluşturur. Kutu modelinin nasıl çalıştığını, CSS'nin diğer yönlerinden nasıl etkilendiğini ve en önemlisi, nasıl kontrol edebileceğinizi anlamak daha tahmin edilebilir CSS yazmanıza yardımcı olabilir.
CSS tarafından görüntülenen her şeyin bir kutu olduğunu unutmamak önemlidir. Bu, yalnızca bir metin olsa veya border-radius karakteriyle daire gibi görünse bile geçerlidir.
İçerik ve boyutlandırma
Kutular, display değerlerine, ayarlanan boyutlarına ve içeriklerine göre farklı davranışlar gösterir. Bu içerik düz metin veya alt öğeler tarafından oluşturulan daha fazla kutu olabilir. Her iki durumda da içerik, kutunun boyutunu varsayılan olarak etkiler.
Bu durumu harici boyutlandırma ile kontrol edebilir veya tarayıcının içerik boyutuna göre sizin için karar vermesine izin vermek üzere dahili boyutlandırma kullanabilirsiniz.
Farkı açıklayan temel bir demo aşağıda verilmiştir:
Demoda, sabit boyutlu ve kalın kenarlıklı bir kutuda "CSS is awesome" (CSS harika) ifadesi yer alıyor. Kutu belirli bir genişliğe sahip olduğundan harici olarak boyutlandırılır.
Bu nedenle, alt içeriklerinin boyutunu kontrol eder. Ancak "awesome" kelimesi kutu için çok büyük olduğundan üst kutunun border box'ının dışına taşar (bu konuyla ilgili daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz). Bu taşmayı önlemenin bir yolu, kutunun genişliğini ayarlamamak veya bu örnekte width değerini min-content olarak ayarlamak suretiyle kutunun boyutunu doğal olarak belirlemektir. min-content anahtar kelimesi, kutuya yalnızca içeriğinin (ör. "awesome" kelimesi) doğal minimum genişliği kadar geniş olmasını söyler. Bu sayede kutu, metnin etrafına tam olarak oturur.
Farklı boyutlandırmanın gerçek içerik üzerindeki etkisini gösteren daha karmaşık bir örneği aşağıda bulabilirsiniz:
Harici boyutlandırmanın size nasıl daha fazla kontrol sağladığını ve dahili boyutlandırmanın içeriğe nasıl daha fazla kontrol sağladığını görmek için dahili boyutlandırmayı açıp kapatın. Efektleri görmek için karta birkaç cümlelik metin ekleyin. Bu öğe harici boyutlandırmaya sahip olduğunda, taşmadan önce ekleyebileceğiniz içerik miktarı sınırlıdır. Ancak dahili boyutlandırma etkinleştirildiğinde bu durum söz konusu olmaz.
Bu öğe, varsayılan olarak her biri 400px olan bir width ve height değerine sahiptir.
Bu boyutlar, öğenin içindeki her şey için katı sınırlar belirler. İçerik kutuya sığamayacak kadar büyük olmadığı sürece bu sınırlar geçerlidir. Çiçek resminin altındaki başlığı kutunun yüksekliğini aşacak şekilde değiştirerek bu özelliği kullanabilirsiniz.
Önemli terim: Taşma, içeriğin bulunduğu kutu için çok büyük olması durumunda gerçekleşir. overflow özelliğini kullanarak bir öğenin taşan içeriği nasıl işleyeceğini yönetebilirsiniz.
İçsel boyutlandırmaya geçiş yaptığınızda tarayıcı, kutunun içerik boyutuna göre sizin için kararlar verir. Kutu içeriğine göre yeniden boyutlandırıldığından taşma olasılığı çok daha düşüktür.
İçsel boyutlandırmanın tarayıcının varsayılan davranışı olduğunu ve genellikle dışsal boyutlandırmaya kıyasla çok daha fazla esneklik sağladığını unutmamak önemlidir.
Kutu modelinin alanları
Kutular, belirli bir işi yapan farklı kutu modeli alanlarından oluşur.
İçerik kutusu, içeriğin bulunduğu alandır. İçerik, üst öğesinin boyutunu kontrol edebilir. Bu nedenle, genellikle en değişken boyutlu alan burasıdır.
Dolgu kutusu, içerik kutusunu çevreler ve padding özelliği tarafından oluşturulan alandır.
Doldurma kutunun içinde olduğundan, kutunun arka planı oluşturduğu alanda görünür.
Kutuya overflow: auto veya overflow: scroll gibi taşma kuralları ayarlanmışsa kaydırma çubukları da bu alanı kaplar.
Kenarlık kutusu, dolgu kutusunu çevreler ve alanı, öğe için görsel bir çerçeve oluşturan border değeriyle tanımlanır. Öğenin kenar kenarlığı, görebileceğiniz sınırları belirler.
Son alan olan kenar boşluğu kutusu, kutunuzun etrafındaki boşluktur ve kutunun margin kuralıyla tanımlanır. outline ve box-shadow gibi özellikler de öğenin üzerine boyandıkları ve kutunun boyutunu etkilemedikleri için bu alanı kaplar. Bir kutudaki outline-width 200px değerini değiştirmek, kenarlık içinde hiçbir şeyi değiştirmez.
Faydalı bir benzetme
Kutu modelini anlamak karmaşık bir süreçtir. Bu nedenle, şu ana kadar öğrendiklerinizi anlamanıza yardımcı olacak bir benzetme aşağıda verilmiştir.
Bu diyagramda, bir duvara yan yana monte edilmiş üç resim çerçevesi var. Çerçeveli resmin öğeleri, kutu modeline aşağıdaki şekilde karşılık gelir:
- İçerik kutusu, sanat eseridir.
- Paspartu, çerçeve ile sanat eseri arasında kalan beyaz montaj kartıdır.
- Sınır kutusu, resim için gerçek bir kenarlık sağlayan çerçevedir.
- Kenar boşluğu kutusu, kareler arasındaki boşluktur.
- Gölge, kenar boşluğu kutusuyla aynı alanı kaplar.
Kutu modelinde hata ayıklama
Tarayıcı geliştirici araçları, seçilen bir kutunun kutu modeli hesaplamalarının görselleştirilmesini sağlar. Bu sayede, kutu modelinin nasıl çalıştığını ve üzerinde çalıştığınız web sitesini nasıl etkilediğini anlayabilirsiniz.
Bu özelliği Chrome'da denemek için:
- Geliştirici Araçları'nı açın.
- Bir öğe seçin.
- Kutu modeli hata ayıklayıcısını gösterir.
Kutu modelini kontrol etme
Kutu modelini nasıl kontrol edeceğinizi anlamak için öncelikle tarayıcınızda neler olduğunu anlamanız gerekir.
Her tarayıcı, HTML dokümanlarına bir kullanıcı aracısı stil sayfası uygular. Stil sayfası, öğelere tanımlanmış CSS verilmemişse öğelerin nasıl görünmesi ve davranması gerektiğini tanımlar. Kullanıcı aracısı stil sayfalarındaki CSS tarayıcıya göre değişir ancak her tarayıcının, içeriğin okunmasını kolaylaştıran varsayılan ayarları vardır.
Kullanıcı aracısı stil sayfası, display alanını kullanan öğeler için varsayılan değeri ayarlar. Örneğin, bir <div> öğesinin varsayılan display değeri block, bir <li> öğesinin varsayılan display değeri list-item ve bir <span> öğesinin varsayılan display değeri inline'dir.
Bir inline öğesinin blok kenar boşluğu var ancak diğer öğeler buna uymuyor.
inline-block ile diğer öğeler blok kenar boşluğuna uyar ancak ilk öğe, inline öğesi olarak sahip olduğu davranışların çoğunu korur.
Bir block öğesi, varsayılan olarak mevcut satır içi alanı doldurur. inline ve inline-block öğeleri ise yalnızca içerikleri kadar büyüktür.
Kullanıcı aracısı stil sayfası, bir kutuya boyutunu nasıl hesaplayacağını söyleyen box-sizing için de varsayılan değerler belirler. Varsayılan olarak tüm öğeler box-sizing: content-box; olarak ayarlanır. Bu, width ve height gibi boyutları ayarladığınızda bu boyutların içerik kutusu için geçerli olduğu anlamına gelir. Ardından padding ve border değerlerini ayarlarsanız bu değerler içerik kutusu boyutuna eklenir.
Bilgilerinizi sınayın
Kutu modeli boyutunu etkileyen özelliklerle ilgili bilginizi test edin.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Sizce .my-box ne kadar geniş olacak?
box-sizing: border-box varsa 200px doğru olur.
Bu kutunun gerçek genişliği 260 pikseldir.
CSS varsayılan box-sizing: content-box değerini kullandığından uygulanan genişlik, içeriğin genişliğidir ve her iki taraftaki padding ile border bu genişliğe eklenir. İçerik için 200 piksel + 40 piksel dolgu + 20 piksel kenarlık, toplamda 260 piksel görünür genişlik oluşturur.
border-box boyutunu belirterek bunu değiştirebilirsiniz:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Bu alternatif kutu modeli, CSS'ye width özelliğini içerik kutusu yerine kenarlık kutusuna uygulaması gerektiğini söyler. Bu durumda border ve padding değerleri aktarılır. Dolayısıyla .my-box değerini 200px genişliğinde ayarladığınızda bu değer 200px genişliğinde oluşturulur.
Bu özelliğin nasıl çalıştığını görmek için aşağıdaki etkileşimli demoya göz atın. box-sizing değerini açtığınızda mavi alan, kutunun içinde hangi CSS'nin uygulandığını gösterir.
*,
*::before,
*::after {
box-sizing: border-box;
}
Bu CSS kuralı, dokümandaki her öğeyi ve her ::before ile ::after sözde öğesini seçip box-sizing: border-box uygular.
Bu nedenle, artık her öğe bu alternatif kutu modelini kullanır.
Alternatif kutu modeli daha tahmin edilebilir olduğundan geliştiriciler genellikle bu kuralı A (more) Modern CSS Reset gibi sıfırlama ve normalleştirme işlemlerine ekler.