#8 - Позиціонування блоків
Відеоурок
Розташувати блоки на сайті можна декількома способами.
По-перше, можна вказати значення float, після чого блок буде позиціонуватися з будь-якої сторони, а всі додаткові елементи будуть обтікати його.
Приклад реалізації:
div {
float: left;
}position. Воно може набувати кількох значень:- fixed - фіксує об'єкт в одному місці екрана і при прокручуванні сторінки блок слідує за вами;
- relative - відносне позиціонування. Можна задати відступи від місця, де зараз розташований об'єкт;
- absolute - абсолютне позиціонування. Можна задати глобальні відступи щодо екрана.
Властивість «display»
Часто необхідно приховати якийсь об'єкт зі сторінки сайту або показати його у форматі: списку, таблиці, блоку, блоку в одну лінію тощо. Для редагування властивості елемента можна використовувати властивість display.
Властивість «overflow»
Якщо для блоку вказати ширину і висоту, то контент, що знаходиться всередині блоку, не завжди може поміщатися в задані рамки. Щоб вказати правило відображення контенту всередині блоку, можна використовувати властивість overflow. При цьому можна додавати overflow для конкретних осей. Так, overflow-y буде застосовувати значення тільки по осі y, а overflow-x тільки по осі x.
CSS Grid System
Також рекомендуємо переглянути роботу CSS системи сіток. Відео по цій темі нижче:
Матеріали для курсу
Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт
Онлайн редактор коду
Завдання до уроку
Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань
Велике завдання за курсом
Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця
Також варто подивитися
