CSS Podcast - 001: The Box Model
Şu HTML bölümüne sahip olduğunuzu varsayalım:
<p>I am a paragraph of text that has a few words in it.</p>
Ardından bunun için şu CSS'yi yazın:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
İçerik, belirttiğiniz 100 piksel yerine 142 piksel genişliğe ulaşır ve öğenizden ayrılır. Bunun nedeni nedir?
Kutu modeli, CSS'nin temel temelidir. Kutu modelinin nasıl çalıştığını, CSS'nin diğer yönlerinden nasıl etkilendiğini ve daha da önemlisi bunu 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 metinden oluşsa veya daire gibi görünecek border-radius işareti içerse bile kutu olduğunu unutmamak önemlidir.
İçerik ve boyutlandırma
Kutular, display değerlerine, ayarlanan boyutlarına ve içerdikleri içeriğe bağlı olarak farklı davranışlara sahiptir. Bu içerik düz metin veya alt öğeler tarafından oluşturulan daha fazla kutu olabilir. Her iki durumda da içerik, varsayılan olarak kutunun
boyutunu etkiler.
Bunu dışsal boyutlandırma ile kontrol edebilir veya tarayıcının içerik boyutuna bağlı olarak sizin adınıza karar vermesini sağlamak için içsel boyutlandırma kullanabilirsiniz.
Aradaki farkı açıklayan temel bir demoyu burada bulabilirsiniz:
Demoda, sabit boyutlara ve kalın bir kenarlığa sahip bir kutuda "CSS harika" kelimeleri yer alır. Kutu, belirtilen bir genişliğe sahip olduğundan dışsal olarak boyutlandırılır.
Yani alt içeriğin boyutunu kontrol eder. Ancak "awesome" kelimesi kutu için çok büyük olduğundan üst kutunun kenarlık kutusunun dışına taşıyor (bu konuyla ilgili daha fazla bilgi ileride ele alınacaktır). Bu taşmayı önlemenin bir yolu, genişliği ayarlamayarak veya bu durumda width özelliğini min-content değerine ayarlayarak kutunun içsel olarak boyutlandırılmasını sağlamaktır. min-content anahtar kelimesi, kutuya yalnızca içeriğinin asgari genişliği kadar ("harika" kelimesi) kadar geniş olacağını belirtir. Böylece kutu, metnin etrafına tam olarak oturur.
Aşağıda, farklı boyutlandırmanın gerçek içerik üzerindeki etkisini gösteren daha karmaşık bir örnek verilmiştir:
Dış boyutlandırmayla nasıl daha fazla kontrol sahibi olduğunuzu görmek için içsel boyutlandırmayı açıp kapatabilirsiniz. Doğal boyutlandırma, içeriğe daha fazla kontrol olanağı verir. Efektleri görmek için karta birkaç cümlelik metin ekleyin. Bu öğenin dışsal boyutlandırması olduğunda, taşmadan önce ekleyebileceğiniz içeriğin bir sınırı vardır ancak içsel boyutlandırma anahtarı açık olduğunda bu durum değişmez.
Varsayılan olarak bu öğede 400px tutarında width ve height bulunur.
Bu boyutlar, öğenin içindeki her şeye katı sınırlar uygular. İçerik, kutu için çok büyük olmadığı sürece bu kurallara uyulur. Çiçek resminin altındaki başlığı, kutunun
yüksekliğini aşacak şekilde değiştirerek bunu uygulamalı olarak görebilirsiniz.
Anahtar terim: Taşma, içerik, bulunduğu kutu için çok büyük olduğunda ortaya çıkar. overflow özelliğini kullanarak bir öğenin taşan içeriği nasıl işleyeceğini yönetebilirsiniz.
Yerleşik boyutlandırmaya geçmek, tarayıcının kutunun içerik boyutuna göre sizin için karar vermesini sağlar. Kutu, içeriğiyle birlikte yeniden boyutlandırıldığından taşma ihtimali bu durumda azalır.
Yerleşik boyutlandırmanın, tarayıcının varsayılan davranışı olduğunu ve genellikle dış boyutlandırmaya göre çok daha fazla esneklik sağladığını unutmayın.
Kutunun alanları modeli
Kutular, her biri belirli bir işi yapan farklı kutu model 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 boyuttaki alandır.
Dolgu kutusu, içerik kutusunu çevreler ve padding özelliği tarafından oluşturulan alandır.
Dolgu, kutunun içinde olduğundan kutunun arka planı, oluşturduğu alanda görünür.
Kutuda overflow: auto veya overflow: scroll gibi taşma kuralları belirlenmişse kaydırma çubukları da bu alanı kaplar.
Kenarlık kutusu, dolgu kutusunu çevreler ve alanın alanı, öğe için görsel bir çerçeve oluşturan border değeriyle tanımlanır. Öğenin kenarlık kenarı, görebileceklerinizin sınırıdır.
Son alan olan kenar boşluğu kutusu, kutunun margin kuralıyla tanımlanan ve kutunuzun çevresindeki alandır. outline ve box-shadow gibi özellikler de öğenin üzerine boyandıkları ve kutunun boyutunu etkilemedikleri için bu alanı kaplar. Bir kutudaki kutunun 200px değerini (outline-width)
değiştirmek, sınır kenarının içinde herhangi bir değişikliğe neden olmaz.
Yararlı bir benzetme
Kutu modelinin anlaşılması karmaşık olduğu için şimdiye kadar öğrendiklerinizin bir benzetimini yapalım.
Bu diyagramda, bir duvara yan yana monte edilmiş üç resim çerçeveniz olduğunu varsayalım. Çerçeveli resmin öğeleri, kutu modeline aşağıdaki şekilde karşılık gelir:
- İçerik kutusu sanat eseridir.
- Dolgu kutusu, çerçeve ile sanat eseri arasında bulunan beyaz bir montaj panosudur.
- Kenarlık kutusu çerçevedir ve eser için değişmez bir kenarlık sağlar.
- Kenar boşluğu kutusu, kareler arasındaki boşluktur.
- Gölge, kenar boşluğu kutusuyla aynı alanı kaplar.
Kutu modelinde hata ayıkla
Tarayıcı Geliştirici Araçları, seçilen kutunun kutu modeli hesaplamalarının bir görselleştirmesini sunar. Bu, kutu modelinin nasıl çalıştığını ve üzerinde çalıştığınız web sitesini nasıl etkilediğini anlamanıza yardımcı olabilir.
Bunu kendi tarayıcınızda deneyin:
- Geliştirici Araçları'nı açın.
- Bir öğe seçin.
- Kutu modeli hata ayıklayıcısını göster.
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ı, tanımlı bir CSS'ye sahip olmayan öğelerin nasıl görünmesi ve davranması gerektiğini tanımlayan bir kullanıcı aracısı stil sayfasını HTML dokümanlarına uygular. Kullanıcı aracısı stil sayfalarındaki CSS, tarayıcıdan tarayıcıya değişir, ancak içeriğin daha kolay okunabilmesi için makul varsayılan değerler sağlar.
Bir özellik, kullanıcı aracısı stil sayfasının bir kutunun varsayılan display değerini ayarlar. Örneğin, normal bir akışta <div> öğesinin varsayılan display değeri block, <li> öğesinin varsayılan display değeri list-item ve <span> öğesinin varsayılan display değeri inline olur.
Bir inline öğesinin blok kenar boşluğu vardır, ancak diğer öğeler bunu dikkate almaz.
inline-block ile diğer öğeler blok kenar boşluğuna uyar, ancak ilk öğe inline öğesiyle aynı davranışların çoğunu korur.
block öğesi, mevcut satır içi alanı varsayılan olarak doldurur. inline ve inline-block öğeleri ise yalnızca içerikleri kadar büyüktür.
Kullanıcı aracısı stil sayfası, bir kutuya kutu boyutunu nasıl hesaplayacağını söyleyen box-sizing özelliğini de ayarlar. Varsayılan olarak tüm öğeler şu kullanıcı aracısı stiline sahiptir: box-sizing: content-box;. 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 kutusunun boyutuna eklenir.
Öğrendiklerinizi sınayın
Kutu modeli boyutunun özellikleri nasıl etkilediğine dair bilginizi test edin.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
.my-box sizce ne kadar geniş olacak?
box-sizing: border-box olsaydı 200px doğru olurdu.
Bu kutunun asıl 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 ve border buna eklenir. İçerik için 200 piksel + 40 piksel dolgu + 20 piksel kenarlık, toplam 260 piksellik bir görünür genişlik oluşturur.
border-box boyutlandırmasını 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 öğesini içerik kutusu yerine kenarlık kutusuna uygulamasını bildirir. Diğer bir deyişle, border ve padding içe aktarılır. Yani .my-box öğesini 200px geniş olacak şekilde ayarladığınızda, 200px genişliğinde oluşturulur.
Bunun nasıl çalıştığını aşağıdaki etkileşimli demoda görebilirsiniz. box-sizing değerini değiştirdiğinizde mavi alan, kutunun içinde hangi CSS'nin uygulanmakta olduğunu gösterir.
*,
*::before,
*::after {
box-sizing: border-box;
}
Bu CSS kuralı, belgedeki her öğeyi ve her ::before ile ::after sözde öğesini seçip box-sizing: border-box uygular.
Diğer bir deyişle, artık her öğe bu alternatif kutu modelini kullanmaktadır.
Alternatif kutu modeli daha tahmin edilebilir olduğundan, geliştiriciler genellikle bu kuralı sıfırlama ve normalleştiricilere (bu örnekte olduğu gibi) ekler.