yoklateknik mülakat
GelişimGeçmiş

Frontend Css Layout Mülakat Soruları

75 doğrulanmış Frontend Css Layout mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Css LayoutZorluk 1
Standart CSS box model'inde bir block element'in kutusu, içten dışa dört katmandan oluşur. Hangi sıralama doğrudur?
  • acontent, sonra margin, sonra border, sonra padding
  • bcontent, sonra padding, sonra border, sonra margin✓
  • ccontent, sonra border, sonra padding, sonra margin
  • dpadding, sonra content, sonra margin, sonra border
Açıklama:En içte content vardır; padding, content'i border'ın içinde sarar; border padding'i çevreler; margin ise bu kutu ile komşuları arasındaki en dıştaki şeffaf boşluktur. (a) şıkkı margin ile padding'i yer değiştirir — margin her zaman border'ın dışındadır, asla content ile border arasında değil.
Css LayoutZorluk 2
.card {
  width: 300px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

.card elementinin content-box (iç) genişliği nedir?
  • a300px — box-sizing ne olursa olsun width her zaman content alanını belirler
  • b360px — width artı iki padding ve iki border
  • c260px — width eksi padding, ama border hariç
  • d240px — width eksi iki padding ve iki border✓
Açıklama:box-sizing: border-box ile bildirilen width content, padding ve border'ı kapsar; tarayıcı content alanını bulmak için bunları çıkarır: 300 − 40 − 20 = 240px. (a) şıkkı varsayılan content-box'ı tarif eder; orada width yalnızca content'i belirler ve kutu toplam 360px'e büyürdü.
Css LayoutZorluk 2
Varsayılan content-box'a kıyasla box-sizing: border-box, bir elementin width değerinin nasıl yorumlandığı konusunda neyi değiştirir?
  • awidth artık content, padding ve border'ı kapsar; padding eklemek content'i küçültür ama toplamı sabit tutar✓
  • bwidth artık margin'i de kapsar, bu yüzden margin'ler komşu elementleri itmez
  • cwidth border'dan dışa doğru ölçülmeye başlar ve element bildirilenden büyük render olur
  • dwidth eskisi gibi yalnızca content'e uygulanır ama padding sessizce yok sayılır
Açıklama:border-box altında bildirilen width, content + padding + border'ın dış genişliğidir; padding ve border kutuya eklenmek yerine content alanından yer alır; layout'ların öngörülebilir kalmasının nedeni budur. Hangi box-sizing olursa olsun margin asla width'in parçası değildir (b) — her zaman kutunun dışında durur.
Css LayoutZorluk 1
display: none ile visibility: hidden arasındaki fark nedir?
  • adisplay: none elementi gizler ama klavye focus'unu korur; visibility: hidden focus'u kaldırır
  • bRender açısından fark yoktur; iki bildirim birbirinin yerine kullanılabilir
  • cdisplay: none elementi layout'tan tamamen çıkarır; visibility: hidden gizler ama yerini korur✓
  • ddisplay: none yalnızca metni gizler; visibility: hidden tüm elementi gizler
Açıklama:display: none elementi flow'dan çıkarır; hiç yer kaplamaz ve arkasında boşluk bırakmaz. visibility: hidden ise elementin kutusunu ayırmaya devam eder, bu yüzden çevredeki içerik kaymaz. İkisi tam da bu layout farkı yüzünden birbirinin yerine geçmez (b).
Css LayoutZorluk 2
Replaced olmayan inline elementler (örneğin bir <span>) hakkında hangi ifade doğrudur?
  • aYeni bir satırda başlar ve container'ın tüm genişliğini kaplayacak şekilde uzarlar
  • bAçık bir width ve height ile alt/üst margin'lerin layout'a etkisi yoktur✓
  • cwidth ve height değerlerini kabul eder ama tüm padding ve border'ı yok sayarlar
  • dHer açıdan tam olarak inline-block elementler gibi davranırlar
Açıklama:Inline kutular satır içinde akar ve içeriği kadar boyutlanır; bu yüzden width/height ve dikey margin yok sayılır. İhtiyacın bu kutu boyutlarının etkili olmasıysa yaptığın şey tam olarak inline-block'a geçmektir (d) — ikisi aynı değildir.
Css LayoutZorluk 2
Bir satırda yan yana durması gereken birkaç <a> link'in var, ama her biri buton gibi görünsün diye sabit bir genişlik ve dikey padding istiyor. Hangi display değeri en uygun?
  • ainline-block — link'ler tek satırda kalır ama width ve dikey padding'e uyar✓
  • bblock — width ve padding'e uyar ama her link'i kendi satırına iter
  • cinline — tek satırda tutar ama width ve dikey padding'i yok sayar
  • dtable-cell — hem width'e hem inline akışa izin veren tek display türü budur
Açıklama:Klasik cevap inline-block'tur: kutu inline akışa katılır (link'ler yan yana durur) ama block gibi width, height ve dikey padding'e uyar. block (b) kutu boyutları için çalışır ama link'leri dikey diz; düz inline (c) ise width ve dikey padding'i tamamen yok sayar.

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla