Укажіть, що таке flex-контейнер

Укажіть, що контролює Flex-контейнер

Укажіть, як ведеться відлік положення елемента, якщо у батьківського елемента значення position встановлено  як  static, або батька НЕМАЄ

Укажіть назву виду позиціювання, що дозволяє зміщувати елемент відносно його поточного положення в структурі html-документа (вверх, вліво, вправо, вниз)

Укажіть властивість top

Укажіть, до чого зручно застосовувати фіксоване позиціонування 

Укажіть властивості overflow при значенні visible 

Укажіть значення властивостей right, left, top і bottom при position: static;

Завдання

Виконайте верстку web-сторінки на базі макета, так як показано на рисунку 5.6. Спозиціонуйте зображення, використовуючи властивість position.

Рис. 5.6. Вигляд web-сторінки в браузері

Рис. 5.7. Структура коду web-сторінки 

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ5, що містить зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr5_position.
4. У папці pr5_position створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.
5. У файлі index.html cтворіть структуру коду, указану на рисунку 5.7., і підключіть відразу зовнішню таблицю стилів, файл style.css.
6. Виконайте верстку на базі макета, так як показано на рисунку 5.6.
7. Застосуйте властивості, для блоку .canvas: ширина — 800 пікселів, висота — 1000 пікселів. Колір фону — білий , а малюнок фону png (властивість background-image: url(../images/bg.png).
8. Для зображень .img-1, .img-2, .img-3 задайте властивість position, що рівна absolute. Відступ зверху — 250 пікселів. Вирівняйте зображення, щоб вони були  рівномірно розміщені по ширині так, як показано на рисунку. Для цього розрахуйте left для кожного зображення.
9. Заголовок slogan розмістіть із лівим відступом 50px, і  зверху — 150px. Позиціювання — абсолютне.
10. Заголовок second-slogan розмістіть із правим відступом 38px, і зверху — 722px. Позиціювання — абсолютне.
11. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr5_position в архів з ім’ям pr5_position -Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Поясніть значення властивості padding: 10px 5px  20px