текст перекладу

1. У чому різниця між одиницями em та rem в CSS?

Відповідь:

• em: Відносно розміру шрифта батьківського елемента. Наприклад, якщо розмір шрифта батьківського елемента становить 16px, а ви встановите font-size: 2em;, то розмір шрифта буде 32px.
• rem: Відносно кореневого елемента (`). Якщо розмір шрифта кореневого елемента становить16px, тоfont-size: 2rem;завжди буде32px`, незалежно від розміру шрифта батьківського елемента.

Пояснення:
em є чутливим до контексту, що може призвести до каскадних змін розміру, в той час як rem забезпечує сталість і є зручнішим для підтримки великих проектів.

html { font-size: 16px; }  
.parent { font-size: 20px; }  
.child { font-size: 2em; } /* 40px, оскільки успадковує від батька */  
.child-rem { font-size: 2rem; } /* 32px, оскільки успадковує від кореня */

2. Поясніть призначення тегу `` в адаптивному дизайні.

Відповідь:
Тег `` гарантує правильне відображення веб-сторінки на різних пристроях, контролюючи розмір і масштабування вікна перегляду.

Приклад:

• width=device-width: Встановлює ширину вікна перегляду відповідно до ширини екрану пристрою.
• initial-scale=1: Забезпечує масштабування 1:1.

Пояснення:
Без цього тегу вебсайти можуть виглядати масштабованими або неправильно відображеними на мобільних пристроях.

3. Як реалізувати адаптивну навігаційну панель за допомогою CSS?

Відповідь:

1. Використовуйте layout flexbox для елементів навігації.
2. Додайте media query для зміни макету на менших екранах.
3. Включіть гамбургер-меню для мобільних пристроїв.

Приклад:

Home
About
Contact
 ```  **Пояснення:**  
Flexbox та media queries гарантують, що навігація адаптується до різних розмірів екранів.  

## 4. Що таке псевдоелементи в CSS? Наведіть приклади.

**Відповідь:**  
Псевдоелементи дозволяють стилізувати певні частини елемента без додавання зайвого HTML.

Приклади:
- `::before` – додає контент перед елементом.
- `::after` – додає контент після елемента.
- `::placeholder` – стилізує текст-заповнювач у полях вводу.

Приклад:

h1::before {
content: "★ ";
color: gold;
}
```

Пояснення:
Вони часто використовуються для декоративних цілей, таких як додавання іконок або стилізація конкретних частин тексту.

5. Поясніть модель коробки CSS та її компоненти.

Відповідь:
Модель коробки CSS визначає, як елементи розміщуються та розміряються на веб-сторінці. Вона складається з:

1. Контент: Область, де відображається текст чи зображення.
2. Відступ (Padding): Простір між контентом та межами.
3. Кордон (Border): Оточує відступи та контент.
4. Міжмежа (Margin): Простір між елементом та сусідніми елементами.

Приклад:

div {    
    width: 100px; /* контент */    
    padding: 10px; /* простір всередині кордону */    
    border: 5px solid black; /* товщина кордону */    
    margin: 20px; /* простір ззовні кордону */   
} 

Пояснення:
Розуміння моделі коробки є важливим для дизайну макетів та правильного розподілу простору.

6. У чому різниця між елементами inline, inline-block та block в HTML?

• inline: Не починає з нового рядка, займає лише необхідну ширину.
• inline-block: Схоже на inline, але дозволяє встановлювати ширину та висоту.
• block: Починає з нового рядка, займає всю доступну ширину.

Inline   
Block
Inline-Block

7. Що таке медіа-запити (media queries) і як їх використовувати в проекті?

• Медіа-запити дозволяють застосовувати стилі в залежності від властивостей пристрою, таких як ширина або орієнтація.
• Приклад:

@media (max-width: 600px) {    
    body {    
        background-color: lightblue;    
    }   
} 

текст перекладу
## У чому різниця між відносним, абсолютним, фіксованим та прилиплим позиціюванням в CSS?

- `relative`: Розташований відносно своєї нормальної позиції.
- `absolute`: Розташований відносно найближчого позиціонованого предка.
- `fixed`: Розташований відносно вікна перегляду.
- `sticky`: Перемикається між відносним та фіксованим позиціюванням залежно від прокрутки.

Relative
Absolute
Fixed
Sticky

Перекладено з: HTML & CSS Interview Questions and Answers 2025 for 2–5 Years Experiences