Делаем добро вместе Детальнее

#8 – Позиционирование блоков

#8 – Позиционирование блоков

Для создания красивого дизайна сайта необходимо уметь корректно располагать блоки. За урок мы изучим разные форматы позиционирования блоков и создадим небольшой веб сайт.

Видеоурок

Расположить блоки на сайте можно несколькими способами. 


Во-первых, можно  указать значение float, после чего блок будет позиционироваться с какой-либо стороны, а все дополнительные элементы будут обтекать его.


Пример реализации:

div {
	float: left;
}
Во-вторых, за счёт свойства position. Оно может принимать несколько значений:
  • fixed - фиксирует объект в одном месте экрана и при прокрутке страницы блок следует за вами;
  • relative - относительное позиционирование. Можно задать отступы от того места, где сейчас расположен объект;
  • absolute - абсолютное позиционирование. Можно задать глобальные отступы относительно экрана.

Свойство «display»

Часто необходимо скрыть какой-либо объект со страницы сайта или показать его в формате: списка, таблицы, блока, блока в одну линию и так далее. Для редактирования свойства элемента можно использовать свойство display.


Свойство «overflow»

Если для блока указать ширину и высоту, то находящийся внутри блока контент не всегда может помещаться в заданные рамки. Чтобы указать правило отображения контента внутри блока можно использовать свойство overflow. При этом вы можете добавлять overflow для конкретных осей. Так, overflow-y будет применять значения только по оси y, а overflow-x только по оси x.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Изучение препроцессора SASS / SCSS
7 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Комментарии для сайта Cackle