Becerilerinizi test edin: Kutu Modeli

Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için CodePen, jsFiddle veya Glitch gibi çevrimiçi bir araç kullanmakta faydalı olabilir.

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki Değerlendirme veya daha fazla yardım bülümüne bakabilirsiniz.

Kutu Model Bir

Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.

Two boxes of the same size

Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

Kutu Modeli İki

Bu görevde kutuya şunları ekleyin:

  • 5px, siyah ve noktalı bir kenarlık.
  • 20px üst kenar boşluğu.
  • 1em sağ kenar boşluğu.
  • 40px bir alt kenar boşluğu.
  • 2em'lik bir sol kenar boşluğu.
  • her tarafına 1em'lik dolguA box with a dotted border

Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

Kutu Modeli Üç

Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?

An inline box with space between it and the text around it.

Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

Değerlendirme veya daha fazla yardım

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.