Kutu Modeli

CSS Podcast'i - 001: Kutu Modeli

Şu HTML parçasına sahip olduğunuzu varsayalım:

<p>I am a paragraph of text that has a few words in it.</p>

Ardından ş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ğinde oluyor ve öğenizden ayrılır. Bunun nedeni nedir?

Kutu modeli, CSS'nin temellerinden biridir. Kutu modelinin nasıl olduğunu anlama etkilendiğini ve CSS'nin diğer yönlerinden nasıl etkilendiğini daha tahmin edilebilir CSS yazmanıza yardımcı olabilir.

CSS tarafından görüntülenen her şeyin bir kutu olduğunu unutmayın. yalnızca bir metinden oluşuyor veya daire gibi görünen bir border-radius içeriyor.

İçerik ve boyutlandırma

Kutular, display değerlerine göre farklı davranışlara sahiptir. ve barındırdıkları içerik. Bu içerik düz metin veya alt öğeler tarafından oluşturulan daha fazla kutu içerir. Her iki durumda da içerikler, boyutu etkiler. varsayılan olarak kutunun işaretini kaldırın.

Bunu dışsal boyutlandırma kullanarak kontrol edebilir veya içsel boyutlandırma seçeneğini kullanabilirsiniz kullanarak tarayıcının içerik boyutuna göre sizin yerinize kararlar almasını sağlar.

Aşağıda, bu farkı açıklayan temel bir demo verilmiştir:

Demoda "CSS mükemmel" ifadesi bulunuyor bir kutu içinde olmalıdır; kalın kenarlık. Kutu belirli bir genişliğe sahip olduğu için dışsal olarak boyutlandırılır. Yani alt içeriğinin boyutunu kontrol eder. Bununla birlikte, "harika" olduğundan üst kutunun dışına taşıyor. kenarlık kutusu (bu konuda daha fazla bilgi verilecektir). Bu fazlalığı önlemenin bir yolu da kutu, genişliğin ayarlanmamasıyla veya bu örnekte, width ayarını min-content yapın. min-content anahtar kelimesi kutuya en az içeriğin doğal minimum genişliği kadar geniş "harika"). Böylece, kutu metnin etrafına mükemmel bir şekilde sığar.

Aşağıda, farklı boyutlandırmaların gerçek reklam harcamaları üzerindeki etkisini içerik:

Dışsal boyutlandırmanın size nasıl daha fazla değer sağladığını görmek için içsel boyutlandırmayı açıp kapatın dışsal boyutlandırma ve içsel boyutlandırma ile kontrol etmek, içeriğin daha görünür olmasını sağlar. ve kontrol etmesi gerekir. Efektleri görmek için karta birkaç cümle ekleyin. Bu öğe harici boyutlandırmaya sahipse ekleme yapabilirsiniz, ancak içsel boyutlandırma açıldı.

Varsayılan olarak bu öğenin her biri 400px şeklinde width ve height grubuna sahiptir. Bu boyutlar, öğenin içindeki her şeye katı sınırlar verir. değeri, içerik kutu için çok büyükse dikkate alınır. Bunu uygulamalı olarak görebilirsiniz çiçek resminin altındaki başlığı yüksekliğine dikkat edin.

Anahtar terim: Taşma, içerik içine yerleştirildiği kutu için çok büyük olduğunda ortaya çıkar. Şunları yapabilirsiniz: overflow özelliğini kullanarak bir öğenin taşan içeriği nasıl işleyeceğini yönetebilirsiniz.

Yerleşik boyutlandırmaya geçiş yaptığınızda, tarayıcı kullandığınız öğelere göre boyutunu değiştirebilirsiniz. Kutu kutu içeriği kapandığı için taşma yeniden boyutlandırır.

İçsel boyutlandırmanın tarayıcı için varsayılan boyut olduğunu boyuta göre genellikle daha fazla esneklik sağlar.

Kutu modelinin alanları

Kutular, tümü belirli bir işi yapan ayrı kutu modeli alanlarından oluşur.

İçerik kutusu, içeriğin bulunduğu alandır. İçerik üst öğesinin boyutunu kontrol ettiğinden bu genellikle en değişken boyuttaki alandır.

Dolgu kutusu, içerik kutusunu çevreler ve padding özelliğini ekleyebilirsiniz. Dolgu kutunun içinde olduğundan kutunun arka planı alanda görünür ortaya çıkarmasını sağlamaya yardımcı olur. Kutuda overflow: auto veya overflow: scroll, kaydırma çubukları da bu alanı kaplar.

Kenarlık kutusu dolgu kutusunu çevreler ve bu kutudaki boşluk border değerini girin. öğe için bir görsel çerçeve oluşturur. Öğenin kenarlık kenarı sınırı vardır.

Son alan olan kenar boşluğu kutusu, kutunuzun çevresindeki boşluktur ve kutusunun margin kuralı. Şunun gibi özellikler: outline ve box-shadow bu alanı da kaplar çünkü öğelerin üstüne boyandıkları ve boyutunu etkiler. Kutunuzdaki outline-width/200px değiştiriliyor kutu, kenarlık kenarı içinde hiçbir şeyi değiştirmez.

Yararlı bir benzetme

Kutu modelinin anlaşılması karmaşıktır. Bu nedenle, örneğinizde ele alacağız.

Bu diyagramda, aynı zeminde birbirlerinin yanına yerleştirilmiş üç resim çerçeveniz duvarda kullanabilirsiniz. Çerçeveli resmin öğeleri, şu şekilde kutu modeline karşılık gelir:

• İçerik kutusu, posterdir.
• Dolgu kutusu, çerçeve ile poster arasındaki beyaz montaj panosudur.
• Kenarlık kutusu, sanat eseri için düz bir kenarlık sağlayan çerçevedir.
• Kenar boşluğu kutusu, kareler arasındaki alandır.
• 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 modelinin görselleştirmesini sağlar yardımcı olacak oldukça basit bir araç setiyle kutu modelinin nasıl çalıştığını üzerinde çalıştığınız web sitesini etkiler.

Bunu kendi tarayıcınızda deneyin:

1. Geliştirici Araçları'nı açın.
2. Bir öğe seçin.
3. 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 gerçekleşir.

Her tarayıcı, bir kullanıcı aracısı stil sayfasını tanımlayan HTML dokümanlarına öğelerin tanımlı CSS'si yoksa nasıl görünmesi ve davranması gerektiği. Şuradaki CSS: Kullanıcı aracısı stil sayfaları tarayıcılar arasında farklılık gösterir, ancak okumayı kolaylaştırmak için varsayılan olarak ayarlanır.

Bir özellikte kullanıcı aracısı stil sayfası, kutunun varsayılan display değerini ayarlar. Örneğin, Örneğin, normal bir akışta, bir <div> öğesinin varsayılan display değeri block, bir <li> için varsayılan display değeri list-item ve <span> olur inline değerine sahip varsayılan bir display değerine sahip.

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 öğesi, bir inline öğesiyle aynı davranışların çoğunu korur. block öğesi, kullanılabilir satır içi alanı varsayılan olarak doldururken inline ve inline-block öğelerinin büyüklüğü yalnızca içeriklerinin büyüklüğü kadardır.

Kullanıcı aracısı stil sayfası, box-sizing öğesini de ayarlar. Bu sayfada kutu boyutunu hesaplayın. Varsayılan olarak tüm öğeler aşağıdaki kullanıcı aracısına sahiptir stil: box-sizing: content-box;. Bu, şu gibi boyutları ayarladığınızda: width ve height gibi bu boyutlar içerik kutusuna uygulanır. Şu durumda: ardından padding ve border ayarlarını yaptığınızda, bu değerler içerik kutusunun seçin.

Öğrendiklerinizi sınayın

Özellikleri etkileyen kutu modeli boyutuyla ilgili bilginizi test edin.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Bu kutunun gerçek genişliği 260 pikseldir. CSS varsayılan box-sizing: content-box parametresini kullandığından uygulanan genişlik: içeriğin genişliği ve her iki taraftaki padding ve border değeri gerekir. İçerik için 200 piksel + 40 piksel dolgu + 20 piksel kenarlık toplam eder 260 piksellik görünür genişlik.

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 kenarlık kutusuna uygulamasını söyler içerik kutusunu işaretlemeyi unutmayın. Bu da border ve padding için aktarıldığı için, .my-box değerini 200px genişliğinde olacak şekilde ayarladığınızda, 200px genişliğinde.

Aşağıdaki etkileşimli demoda bunun işleyiş şekline göz atabilirsiniz. box-sizing değeri için mavi alan, dahilinde hangi CSS'nin uygulandığını gösterir seçin.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Bu CSS kuralı, dokümandaki tüm öğeleri seçer ve her ::before ve ::after sözde öğesi ile birlikte box-sizing: border-box uygular. Bu, her öğenin artık bu alternatif kutu modelini kullandığı anlamına gelir.

Alternatif kutu modeli daha tahmin edilebilir olduğu için geliştiriciler genellikle sıfırlamalar ve normalleştiriciler için bu kuralı bunun gibi kullanın.

Kaynaklar

• Kutu modeline giriş
• Tarayıcı geliştirici araçları nedir?

Kullanıcı aracısı stil sayfaları

• Chromium
• Firefox
• Webkit