
#8 – Позиционирование блоков
Видеоурок
Расположить блоки на сайте можно несколькими способами.
Во-первых, можно указать значение float
, после чего блок будет позиционироваться с какой-либо стороны, а все дополнительные элементы будут обтекать его.
Пример реализации:
div {
float: left;
}
position
. Оно может принимать несколько значений:- fixed - фиксирует объект в одном месте экрана и при прокрутке страницы блок следует за вами;
- relative - относительное позиционирование. Можно задать отступы от того места, где сейчас расположен объект;
- absolute - абсолютное позиционирование. Можно задать глобальные отступы относительно экрана.
Свойство «display»
Часто необходимо скрыть какой-либо объект со страницы сайта или показать его в формате: списка, таблицы, блока, блока в одну линию и так далее. Для редактирования свойства элемента можно использовать свойство display
.
Свойство «overflow»
Если для блока указать ширину и высоту, то находящийся внутри блока контент не всегда может помещаться в заданные рамки. Чтобы указать правило отображения контента внутри блока можно использовать свойство overflow. При этом вы можете добавлять overflow для конкретных осей. Так, overflow-y
будет применять значения только по оси y, а overflow-x
только по оси x.
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Онлайн редактор кода
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть