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.