BananaMaster

6 Как работают %, vw и vh в CSS - ( HTML and CSS, Front End )

Если что то забыли кликни для перехода на урок

📘 Практические задачи: %, vw, vh

Для каждой задачи создай отдельные классы в файле style.css и примени их к нужным тегам.

📌 Структура файлов: index.html + style.css

✏️ Задача 1

Повтори блок. Размеры родителя определи на глаз:

• Определи размеры на глаз
• Родитель — фон: #2c3e50, размеры в px
• Дочерний — фон: #e74c3c, размеры в %

✏️ Задача 2

Повтори блок. Размеры родителя определи на глаз:

• Определи размеры на глаз
• Родитель — фон: #8e44ad, размеры в px
• Дочерний — фон: #f1c40f, размеры в %

✏️ Задача 3

Повтори вложенные блоки. Размеры родителя определи на глаз:

• Определи размеры на глаз
• Родитель — фон: #16a085, размеры в px
• Дочерний — фон: #e67e22, размеры в %

✏️ Задача 4

Три дочерних блока стоят в колонку и делят высоту родителя. Размеры родителя определи на глаз:

• Определи размеры на глаз
• Родитель — фон: #2d3436, размеры в px
• Дочерний 1 — фон: #e74c3c, размеры в %
• Дочерний 2 — фон: #3498db, размеры в %
• Дочерний 3 — фон: #2ecc71, размеры в %

✏️ Задача 5

Родитель зависит от окна браузера, два дочерних стоят в колонку. Определи значения на глаз:

• Определи размеры на глаз
• Родитель — фон: #c0392b, ширина в vw, высота в vh
• Дочерний 1 — фон: #f1c40f, размеры в %
• Дочерний 2 — фон: #9b59b6, размеры в %
• 💡 Попробуй изменить ширину окна браузера — что происходит с блоками?

✏️ Задача 6

Родитель зависит от окна браузера, три дочерних стоят в колонку. Определи значения на глаз:

• Определи размеры на глаз
• Родитель — фон: #6c5ce7, ширина в vw, высота в vh
• Дочерний 1 — фон: #e17055, размеры в %
• Дочерний 2 — фон: #00cec9, размеры в %
• Дочерний 3 — фон: #fdcb6e, размеры в %

✏️ Задача 7

Родитель — от окна браузера, дочерний — от родителя. Определи значения на глаз:

• Определи размеры на глаз
• Родитель — фон: #00b894, ширина в vw, высота в vh
• Дочерний — фон: #fd79a8, размеры в %
• 💡 Процент дочернего считается от размера родителя

✏️ Задача 8

Родитель — от окна браузера, дочерний — от родителя. Определи значения на глаз:

• Определи размеры на глаз
• Родитель — фон: #e17055, ширина в vw, высота в vh
• Дочерний — фон: #0984e3, размеры в %

✏️ Задача 9

Три уровня: родитель от окна, каждый дочерний от своего родителя. Определи значения на глаз:

• Определи размеры на глаз
• Блок 1 (внешний) — фон: #2c3e50, ширина в vw, высота в vh
• Блок 2 (средний) — фон: #e74c3c, размеры в %
• Блок 3 (внутренний) — фон: #f1c40f, размеры в %
• 💡 Каждый % считается от своего прямого родителя!

✏️ Задача 10 — 🔥 Бонус

Три дочерних блока стоят в колонку внутри родителя. Определи значения на глаз:

• Определи размеры на глаз
• Родитель — фон: #2c3e50, ширина в vw, высота в vh
• Дочерний 1 — фон: #e74c3c, размеры в %
• Дочерний 2 — фон: #f39c12, размеры в %
• Дочерний 3 — фон: #2ecc71, размеры в %

📌 Важно:
Каждый класс пишется отдельно в style.css.
Используйте только HTML и CSS.
Практикуйте единицы: %, vw, vh.