Docs(MD): Added interview questions and answers

Author: ViktorSvertoka

README.md

@@ -88,6 +88,181 @@
 
 <details>
 
-<summary>6. </summary>
+<summary>6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?</summary>
 
+- «Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS. Вона складається з:
+
+  - **Content:** Вміст елемента (текст, зображення).
+  - **Padding:** Внутрішній відступ між вмістом і рамкою.
+  - **Border:** Рамка навколо padding.
+  - **Margin:** Зовнішній відступ між елементом і сусідніми елементами.
+
+- Розрахунок ширини та висоти:
+
+  - За замовчуванням:
+
+  ```css
+  Width/Height = Content + Padding + Border
+  ```
+
+- Зміна моделі коробки:
+
+  - Використовуйте властивість box-sizing:
+
+1. content-box (за замовчуванням):
+
+- Ширина/висота включає лише вміст. Padding і border додаються до загального розміру.
+
+  ```css
+  box-sizing: content-box;
+  ```
+
+2. border-box:
+
+- Ширина/висота включають вміст, padding і border (зручніше для макетів).
+
+  ```css
+  box-sizing: border-box;
+  ```
+
+- Приклад:
+
+  ```css
+  * {
+    box-sizing: border-box;
+  }
+  ```
+
+  - Це допомагає уникнути помилок у розмітці.
+  </details>
+
+<details>
+<summary>7. Що таке CSS?</summary>
+
+- Різниця між margin і padding:
+
+1. Розташування:
+
+   - `margin` створює зовнішній відступ між елементом і сусідніми елементами.
+   - `padding` створює внутрішній відступ між вмістом елемента і його рамкою (border).
+
+2. Вплив на фон:
+
+   - `margin` не впливає на фон елемента; простір залишається прозорим.
+   - `padding` є частиною елемента, тому фон розтягується на область padding.
+
+3. Колізія (margin collapsing):
+
+   - `margin` сусідніх блоків може "зливатися" в один (найбільший).
+   - `padding` не зливається; завжди додається до внутрішнього простору.
+
+- Приклад:
+
+  ```css
+  div {
+    margin: 20px; /* Відступ від інших елементів */
+    padding: 20px; /* Відступ між вмістом і рамкою */
+    background-color: lightblue;
+  }
+  ```
+
+</details>
+
+<details>
+<summary>8. Що таке Flexbox?</summary>
+
+- Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть якщо розміри елементів невідомі або змінюються.
+
+- **Основні поняття:**
+
+  - **Flex-контейнер:** Батьківський елемент, на який застосовується `display: flex;`.
+  - **Flex-елементи:** Дочірні елементи flex-контейнера.
+
+- **Основні властивості Flexbox:**
+
+1. Для контейнера:
+
+   - `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`, `column`, `column-reverse`).
+   - `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`, `center`, `space-between`, `space-around`, `space-evenly`).
+   - `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`, `flex-start`, `flex-end`, `baseline`).
+   - `align-content`: Вирівнювання рядків у багаторядковому контейнері (`stretch`, `center`, `space-between`).
+   - `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`, `wrap-reverse`).
+
+2. Для елементів:
+
+   - `flex-grow`: Як елемент збільшується вільним простором.
+   - `flex-shrink`: Як елемент зменшується при нестачі простору.
+   - `flex-basis`: Базовий розмір елемента перед розподілом простору.
+   - `align-self`: Вирівнювання конкретного елемента всередині контейнера.
+
+- Приклад:
+
+  ```css
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .item {
+    flex: 1; /* Рівний розподіл простору */
+  }
+  ```
+
+</details>
+
+<details>
+<summary>9. Що таке Grid?</summary>
+
+- CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки для розташування елементів як по горизонталі, так і по вертикалі.
+
+- **Основні поняття:**
+
+  - **Grid-контейнер:** Елемент, на який застосовується `display: grid;`.
+  - **Grid-елементи:** Дочірні елементи grid-контейнера.
+  - **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на осередки.
+  - **Треки:** Рядки (`rows`) і колонки (`columns`).
+  - **Області:** Прямокутні зони, об'єднані з кількох осередків.
+
+- **Основні властивості Grid:**
+
+1. Для контейнера:
+
+- `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри рядків та колонок.
+- `grid-template-areas`: Іменовані області для організації елементів.
+- `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками.
+- `justify-items`, `align-items`: Вирівнювання елементів у клітинках.
+- `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері.
+
+2. Для елементів:
+
+- `grid-column`, `grid-row`: Позиціювання по колонках і рядках.
+- `grid-area`: Розміщення в іменованій області.
+- `place-self`: Індивідуальне вирівнювання елемента.
+
+- Приклад:
+
+  ```css
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */
+    grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */
+    gap: 10px;
+  }
+
+  .item1 {
+    grid-column: 1 / 3; /* Займає дві колонки */
+  }
+
+  .item2 {
+    grid-row: 2; /* Розташований у другому рядку */
+  }
+  ```
+
+</details>
+
+<details>
+<summary>10. </summary>
+
+- CSS (Cascading Style Sheets) — це мова стилів, яка використовується для опису зовнішнього вигляду веб-сторінок, створених за допомогою HTML або XML.
 </details>