Becerilerinizi test edin: Boyutlandırma

Bu görevin amacı CSS'de Öğeleri Boyutlandırma dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi 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

Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.

İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.

Two boxes one with overflowing content

Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:

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

İkinci Görev

Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. box-sizing niteliği border-boxolarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.A box with another box nested inside

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

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

Görev Üç

Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.

Two boxes with images in

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

Değerlendirme ve daha ileri çalışma için bu görevin kaynak kodu, 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ı.