Becerilerinizi test edin: Taşma

Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki Değerlendirme ve yardım bölümüne bakın.

Birinci Görev

Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.

A small box with a border and a vertical scrollbar.

Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

İkinci Görev

Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.

A box with an image which fills the box but does not spill out the edges.

Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

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ı.