سؤالات مصاحبه HTML و CSS سطح جونیور (50 سؤال)

Question 1

مزیت اصلی تگ‌های semantic مثل `

Accepted Answer

معنا برای a11y و SEO + خوانایی کد

Answer

فقط سرعت رندر را بالا می‌برند

Answer

جایگزین کامل CSS هستند

Answer

فقط در XHTML کار می‌کنند

Question 2

با `box-sizing: border-box` عرض شامل چیست؟

Accepted Answer

content + padding + border

Answer

فقط content

Answer

content + margin

Answer

فقط border

Question 3

تفاوت اصلی Flexbox و Grid؟

Accepted Answer

Flex یک‌بعدی؛ Grid دوبعدی

Answer

Grid فقط برای موبایل است

Answer

Flex نمی‌تواند تراز کند

Answer

هیچ تفاوتی نیست

Question 4

هدف اصلی attribute `alt` روی `<img>` چیست؟

Accepted Answer

متن جایگزین برای screen reader و وقتی تصویر لود نشود

Answer

tooltip هنگام hover

Answer

فشرده‌سازی تصویر

Answer

تعیین اندازه تصویر

Question 5

تفاوت `display: none` و `visibility: hidden`؟

Accepted Answer

`none` از layout حذف می‌کند؛ `hidden` جایش را نگه می‌دارد

Answer

هر دو جای عنصر را نگه می‌دارند

Answer

`hidden` عنصر را از DOM حذف می‌کند

Answer

هیچ تفاوتی ندارند

Question 6

واحد `rem` نسبت به چه چیزی محاسبه می‌شود؟

Accepted Answer

font-size عنصر ریشه (`html`)

Answer

font-size والد

Answer

عرض viewport

Answer

عرض والد

Question 7

عنصر `position: absolute` نسبت به چه چیزی قرار می‌گیرد؟

Accepted Answer

نزدیک‌ترین والدی که position غیر از static دارد

Answer

همیشه viewport

Answer

همیشه والد مستقیم

Answer

عنصر قبلی هم‌سطح

Question 8

اتصال `<label for="email">` به input چه فایده‌ای دارد؟

Accepted Answer

کلیک روی label فوکوس می‌دهد و screen reader نام فیلد را می‌خواند

Answer

فقط استایل متن را تغییر می‌دهد

Answer

اعتبارسنجی ایمیل را فعال می‌کند

Answer

فرم را خودکار ارسال می‌کند

Question 9

`<meta name="viewport" content="width=device-width">` چرا لازم است؟

Accepted Answer

تا موبایل صفحه را با عرض واقعی دستگاه رندر کند نه عرض دسکتاپ

Answer

برای SEO در گوگل الزامی است و کار دیگری نمی‌کند

Answer

سرعت شبکه را بالا می‌برد

Answer

dark mode را فعال می‌کند

Question 10

هدف `<!DOCTYPE html>` در ابتدای سند چیست؟

Accepted Answer

مرورگر را در standards mode قرار می‌دهد

Answer

فایل CSS اصلی را بارگذاری می‌کند

Answer

زبان صفحه را تعیین می‌کند

Answer

یک تگ HTML اجباری برای SEO است

Question 11

تفاوت اصلی عناصر `block` و `inline` چیست؟

Accepted Answer

block در خط جدید شروع می‌شود و تمام عرض را می‌گیرد؛ inline در جریان متن می‌ماند

Answer

inline همیشه در خط جدید شروع می‌شود

Answer

block نمی‌تواند padding داشته باشد

Answer

inline فقط برای تصاویر استفاده می‌شود

Question 12

`display: inline-block` چه ویژگی‌ای دارد؟

Accepted Answer

در خط کنار بقیه می‌نشیند ولی `width` و `height` را می‌پذیرد

Answer

مانند block در خط جدید شروع می‌شود

Answer

عنصر را از جریان صفحه خارج می‌کند

Answer

margin و padding را نادیده می‌گیرد

Question 13

چه زمانی باید از `

Accepted Answer

برای انجام یک action در صفحه؛ `<a>` برای navigation است

Answer

همیشه، چون `<a>` قابل استایل‌دهی نیست

Answer

فقط داخل فرم‌ها؛ بیرون فرم `<button>` کار نمی‌کند

Answer

هر وقت لینک به سایت دیگری باشد

Question 14

بهترین روش استفاده از headingها (`

` تا `

`) چیست؟

Accepted Answer

ساختار سلسله‌مراتبی بدون پرش سطح، بر اساس محتوا نه اندازه

Answer

انتخاب بر اساس اندازه‌ی فونت دلخواه

Answer

استفاده از چند `<h1>` برای بهبود SEO

Answer

headingها فقط تزئینی‌اند و ترتیبشان مهم نیست

Question 15

دو `

` پشت سر هم داریم: اولی `margin-bottom: 20px` و دومی `margin-top: 30px`. فاصله‌ی بینشان چقدر است؟

Accepted Answer

`30px`

Answer

`50px`

Answer

`20px`

Answer

`10px`

Question 16

`position: relative` همراه با `top: 10px` چه می‌کند؟

Accepted Answer

عنصر را ۱۰px پایین می‌برد ولی جای اصلی‌اش در layout حفظ می‌شود

Answer

عنصر را از جریان صفحه خارج می‌کند

Answer

عنصر را نسبت به viewport ثابت می‌کند

Answer

هیچ اثری ندارد؛ `top` فقط با absolute کار می‌کند

Question 17

عنصری با `position: fixed` معمولاً نسبت به چه چیزی قرار می‌گیرد؟

Accepted Answer

viewport مرورگر، و با اسکرول جابه‌جا نمی‌شود

Answer

نزدیک‌ترین والد positioned

Answer

عنصر `<body>` و همراه آن اسکرول می‌شود

Answer

موقعیت عادی خودش در جریان صفحه

Question 18

چرا `z-index: 10` روی یک `

` معمولی اثری ندارد؟

Accepted Answer

چون عنصر `position: static` است؛ z-index روی عناصر positioned یا flex/grid item کار می‌کند

Answer

چون z-index باید بالای ۱۰۰ باشد

Answer

چون z-index فقط روی تصاویر کار می‌کند

Answer

چون باید واحد `px` داشته باشد

Question 19

تفاوت `ul li` و `ul > li` چیست؟

Accepted Answer

اولی همه‌ی نوادگان را انتخاب می‌کند؛ دومی فقط فرزندان مستقیم

Answer

دومی همه‌ی نوادگان را انتخاب می‌کند

Answer

هیچ تفاوتی ندارند

Answer

`>` یعنی specificity بیشتر

Question 20

سلکتور `h2 + p` چه چیزی را انتخاب می‌کند؟

Accepted Answer

`

`ای که بلافاصله بعد از یک `

` آمده باشد

Answer

همه‌ی `

`های بعد از `

`

Answer

هر `

` و هر `
`

Answer

`

`هایی که داخل `

` هستند

Question 21

چرا استفاده‌ی زیاد از `!important` توصیه نمی‌شود؟

Accepted Answer

cascade طبیعی را می‌شکند و override کردن را سخت می‌کند

Answer

مرورگرهای مدرن آن را پشتیبانی نمی‌کنند

Answer

باعث کند شدن شدید JavaScript می‌شود

Answer

فقط در inline style کار می‌کند

Question 22

کدام property به‌صورت پیش‌فرض از والد به فرزندان ارث می‌رسد؟

Accepted Answer

`color`

Answer

`border`

Answer

`margin`

Answer

`background-color`

Question 23

مقدار درصدی در `padding-top: 10%` نسبت به چه محاسبه می‌شود؟

Accepted Answer

عرض containing block

Answer

ارتفاع containing block

Answer

اندازه‌ی فونت عنصر

Answer

ارتفاع viewport

Question 24

`50vh` برابر با چیست؟

Accepted Answer

۵۰٪ ارتفاع viewport

Answer

۵۰٪ ارتفاع والد

Answer

۵۰ برابر اندازه‌ی فونت root

Answer

۵۰٪ عرض viewport

Question 25

در یک flex container با `flex-direction: row`، `justify-content` و `align-items` روی کدام محورها کار می‌کنند؟

Accepted Answer

`justify-content` محور افقی (main)، `align-items` محور عمودی (cross)

Answer

هر دو روی محور افقی کار می‌کنند

Answer

`justify-content` عمودی، `align-items` افقی

Answer

هر دو فقط روی متن داخل آیتم‌ها اثر دارند

Question 26

اگر سه آیتم در یک flex container همگی `flex: 1` داشته باشند، چه اتفاقی می‌افتد؟

Accepted Answer

فضای موجود را به‌طور مساوی بین خود تقسیم می‌کنند

Answer

فقط آیتم اول بزرگ می‌شود

Answer

همگی عرض ۱px می‌گیرند

Answer

آیتم‌ها زیر هم قرار می‌گیرند

Question 27

مقدار پیش‌فرض `flex-wrap` چیست و نتیجه‌اش چیست؟

Accepted Answer

`nowrap`؛ همه‌ی آیتم‌ها در یک خط می‌مانند و ممکن است کوچک شوند یا سرریز کنند

Answer

`wrap`؛ آیتم‌ها خودکار به خط بعد می‌روند

Answer

`wrap-reverse`؛ آیتم‌ها از پایین چیده می‌شوند

Answer

مقدار پیش‌فرضی ندارد و باید تعیین شود

Question 28

مزیت `gap` نسبت به گذاشتن margin روی آیتم‌ها چیست؟

Accepted Answer

فقط بین آیتم‌ها فاصله می‌گذارد، نه در لبه‌های بیرونی

Answer

فقط در Grid کار می‌کند و در Flexbox نه

Answer

روی padding container هم اضافه می‌شود

Answer

باعث collapse شدن margin‌ها می‌شود

Question 29

`grid-template-columns: 1fr 2fr` چه layoutی می‌سازد؟

Accepted Answer

دو ستون که دومی دو برابر عرض اولی را از فضای آزاد می‌گیرد

Answer

سه ستون مساوی

Answer

دو سطر با ارتفاع ۱ و ۲ پیکسل

Answer

یک ستون ۱px و یک ستون ۲px

Question 30

در رویکرد mobile-first، media queryها معمولاً چگونه نوشته می‌شوند؟

Accepted Answer

استایل پایه برای موبایل و `min-width` برای صفحه‌های بزرگ‌تر

Answer

استایل پایه برای دسکتاپ و `max-width` برای موبایل

Answer

فقط با `orientation: portrait`

Answer

با یک فایل CSS جداگانه برای هر گوشی

Question 31

استفاده از `<input type="email">` به جای `type="text"` چه مزیتی دارد؟

Accepted Answer

validation داخلی مرورگر و کیبورد مناسب در موبایل

Answer

ارسال خودکار ایمیل به کاربر

Answer

رمزنگاری مقدار ورودی

Answer

حذف نیاز به validation در سرور

Question 32

در یک `<form>`، تفاوت `method="get"` و `method="post"` چیست؟

Accepted Answer

GET داده را در query string URL می‌فرستد؛ POST در body درخواست

Answer

POST داده را در URL می‌فرستد

Answer

GET امن‌تر است چون داده رمزنگاری می‌شود

Answer

هیچ تفاوتی ندارند

Question 33

کاربرد `

` و `` چیست؟

Accepted Answer

گروه‌بندی کنترل‌های مرتبط (مثل radioها) با یک عنوان قابل‌دسترس

Answer

ساخت جدول داده

Answer

نمایش راهنمای رنگ نمودار

Answer

غیرفعال کردن کل صفحه

Question 34

چرا `placeholder` جایگزین مناسبی برای `<label>` نیست؟

Accepted Answer

با تایپ کردن ناپدید می‌شود و معمولاً کنتراست کمی دارد

Answer

placeholder در مرورگرهای موبایل کار نمی‌کند

Answer

placeholder باعث ارسال نشدن فرم می‌شود

Answer

placeholder فقط روی `<textarea>` کار می‌کند

Question 35

چرا باید `lang` را روی `<html>` تنظیم کرد (مثلاً `lang="fa"`)؟

Accepted Answer

تا screen reader تلفظ درست و مرورگر قواعد زبانی را اعمال کند

Answer

تا جهت متن خودکار راست‌به‌چپ شود

Answer

تا فونت فارسی دانلود شود

Answer

فقط برای اعتبارسنج HTML لازم است

Question 36

چرا `` باید در ابتدای `` باشد؟

Accepted Answer

تا مرورگر قبل از parse بقیه‌ی محتوا encoding را بداند و متن خراب نشود

Answer

تا فونت‌ها سریع‌تر بارگذاری شوند

Answer

تا صفحه در موبایل responsive شود

Answer

تا موتورهای جستجو صفحه را index کنند

Question 37

`overflow: auto` چه تفاوتی با `overflow: scroll` دارد؟

Accepted Answer

`auto` فقط در صورت نیاز scrollbar نشان می‌دهد؛ `scroll` همیشه

Answer

`auto` محتوای اضافه را مخفی می‌کند

Answer

`scroll` فقط اسکرول افقی می‌دهد

Answer

هر دو دقیقاً یکسان‌اند

Question 38

چگونه یک `

` با `width: 600px` را به‌صورت افقی وسط والدش قرار می‌دهیم؟

Accepted Answer

`margin: 0 auto`

Answer

`text-align: center` روی خود div

Answer

`vertical-align: middle`

Answer

`float: center`

Question 39

چرا `opacity: 0.5` روی یک کارت، متن داخلش را هم کم‌رنگ می‌کند؟

Accepted Answer

opacity روی کل عنصر و فرزندانش اعمال می‌شود؛ برای پس‌زمینه‌ی نیمه‌شفاف از `rgb(... / 0.5)` استفاده کنید

Answer

چون opacity یک property ارثی است و فرزندان می‌توانند با `opacity: 1` آن را لغو کنند

Answer

چون مرورگر یک باگ دارد

Answer

چون متن همیشه opacity والد را دو برابر می‌کند

Question 40

چرا `::before` بدون property `content` نمایش داده نمی‌شود؟

Accepted Answer

pseudo-element فقط وقتی `content` (حتی `""`) داشته باشد ساخته می‌شود

Answer

چون `::before` فقط روی تصاویر کار می‌کند

Answer

چون باید `display: none` داشته باشد

Answer

چون `::before` به JavaScript نیاز دارد

Question 41

`tr:nth-child(2n)` کدام سطرها را انتخاب می‌کند؟

Accepted Answer

سطرهای زوج (دوم، چهارم، ...)

Answer

سطرهای فرد (اول، سوم، ...)

Answer

فقط سطر دوم

Answer

دو سطر اول

Question 42

تفاوت `` و `` چیست؟

Accepted Answer

`` اهمیت معنایی دارد؛ `` فقط تمایز ظاهری بدون اهمیت بیشتر

Answer

`<b>` منسوخ شده و نباید استفاده شود

Answer

`<strong>` فونت را بزرگ‌تر می‌کند

Answer

هیچ تفاوتی ندارند

Question 43

برای دسترس‌پذیر کردن یک جدول داده، از چه چیزی باید برای سرستون‌ها استفاده کرد؟

Accepted Answer

`` (در صورت نیاز با `scope`) به جای `` با فونت bold

Answer

`<td>` با کلاس `header`

Answer

`

` با `display: table-cell`

Answer

یک `<h3>` بالای هر ستون

Question 44

`tabindex="0"` روی یک عنصر چه می‌کند؟

Accepted Answer

آن را به ترتیب طبیعی Tab در DOM اضافه می‌کند

Answer

آن را اولین عنصر در ترتیب Tab می‌کند

Answer

آن را از ترتیب Tab حذف می‌کند

Answer

آن را غیرفعال می‌کند

Question 45

حداقل نسبت کنتراست WCAG AA برای متن معمولی چقدر است؟

Accepted Answer

`4.5:1`

Answer

`2:1`

Answer

`10:1`

Answer

`1.5:1`

Question 46

`object-fit: cover` روی یک `<img>` با ابعاد ثابت چه می‌کند؟

Accepted Answer

کل باکس را پر می‌کند و نسبت تصویر حفظ می‌شود، با برش بخش‌های اضافه

Answer

تصویر را کشیده می‌کند تا دقیقاً باکس را پر کند

Answer

کل تصویر را بدون برش نمایش می‌دهد و فضای خالی می‌گذارد

Answer

تصویر را پشت محتوا قرار می‌دهد

Question 47

کاربرد `

` و `

` چیست؟

Accepted Answer

گروه‌بندی یک محتوای مستقل (تصویر، نمودار، کد) با توضیح مرتبط

Answer

ساخت گالری اسلایدر خودکار

Answer

جایگزین `alt` برای تصاویر

Answer

نمایش اعداد در فرم‌ها

Question 48

اضافه کردن `box-shadow` به یک عنصر چه اثری روی layout دارد؟

Accepted Answer

هیچ؛ سایه فضایی در layout اشغال نمی‌کند

Answer

مانند border اندازه‌ی عنصر را بزرگ می‌کند

Answer

margin عنصر را افزایش می‌دهد

Answer

باعث جابه‌جایی عناصر کناری می‌شود

Question 49

چرا `line-height: 1.5` (بدون واحد) معمولاً از `line-height: 1.5em` بهتر است؟

Accepted Answer

فرزندان ضریب را به ارث می‌برند و نسبت به فونت خودشان محاسبه می‌کنند

Answer

مقدار بدون واحد سریع‌تر render می‌شود

Answer

`em` در `line-height` مجاز نیست

Answer

مقدار بدون واحد همیشه برابر 1.5px است

Question 50

attribute `hidden` روی یک عنصر HTML چه کاری انجام می‌دهد؟

Accepted Answer

آن را مخفی و از accessibility tree حذف می‌کند (مانند `display: none`)

Answer

آن را فقط از دید screen reader مخفی می‌کند

Answer

آن را شفاف ولی قابل کلیک نگه می‌دارد

Answer

آن را از DOM حذف می‌کند

HTML و CSS · جونیور · 50

مزیت اصلی تگ‌های semantic مثل `<nav>` و `<main>` چیست؟