Основные блоки сайта
Основные блоки сайта — это элементы, которые помогают структурировать страницу, группировать другие элементы и располагать их нужным образом относительно друг друга. Чаще всего они являются родительскими элементами, содержащими в себе дочерние элементы (подробнее — Блочная модель сайта и иерархия элементов).
К основным блокам сайта относятся Div-блок, Секция и Контейнер.
Если у Div-блока, Секции или Контейнера высота установлена на значение auto и внутри нет дочерних элементов, то такие блоки не будут видны на опубликованном сайте.
Особенности Div-блока
Div-блок — это самый простой и универсальный элемент, используемый при создании сайта. Секции, Контейнеры, Кнопки — все это Div-блоки с определенными дополнительными настройками. По умолчанию ширина Div-блока 100%, а высота автоматически подстраивается под контент внутри блока.
Использование Div-блоков
Div-блоки можно использовать:
- В качестве разделителей и для создания пространства между другими блоками;
- Для группировки других элементов.
К Div-блоку можно применить любые необходимые стили, например:
- Установить параметры отображения, чтобы нужным образом расположить и выровнять дочерние элементы внутри блока (подробнее — Авто-расположение (в режиме flex));
- Установить необходимые размеры блока (например, минимальную высоту) и внутренние и внешние отступы (подробнее — Размеры и отступы у элементов);
Особенности Секций
Секция — элемент шириной 100%, который растягивается на всю ширину окна браузера. По умолчанию высота Секции автоматически подстраивается под ее содержимое — по мере добавления в нее элементов Секция становится выше.
Использование Секций
Секции используются для создания отдельных блоков контента и разделения страницы на значимые сегменты. Они помогают выстроить логическую структуру страницы. Например, Секциями могут быть шапка страницы, блоки «О компании», «Наши услуги» и футер. Чтобы получить последовательную структуру сайта, добавляйте Секции на Холст, а затем организуйте внутри них контент.
Вы можете присваивать секциям названия, описывая их назначение, для создания удобной структуры сайта. Это можно сделать на панели навигатора во вкладке Слои, дважды кликнув по названию элемента или по правой кнопке мыши.
К секции можно применить любые стили. Например:
- Установить параметры отображения, чтобы нужным образом расположить и выровнять дочерние элементы внутри секции;
- Задать внутренние и внешние отступы;
- Добавить фон или фоновое изображение;
- Добавить эффекты, например, трансформацию для ее дочерних элементов.
Минимальная высота
Чтобы контент не выходил за границы секции, установите минимальную высоту, например, 500 пикселей. В этом случае секция будет высотой не меньше установленной, а при добавлении контента она будет становиться выше, и контент не будет обрезаться.
Секция высотой на весь экран
В некоторых случаях необходимо, чтобы секция занимала полностью всю высоту экрана или какую-то его часть, например, такие настройки могут быть полезны для шапки сайта.
Установите минимальную высоту секции 100vh(view height) — она заполнит 100% высоты окна браузера. Значение 50vh приведет к заполнению 50% высоты окна браузера и так далее.
Особенности Контейнеров
Контейнер используется для центрирования контента на странице. Это сделано благодаря установленным автоматическим внешним отступам слева и справа, контейнер всегда будет в центре родительского элемента.
По умолчанию максимальная ширина контейнера – 960px. Если необходим контейнер другой ширины, ее можно изменить в настройках стилей.
Использование Контейнеров
Разместите контейнер внутри секции. Он расположится ровно по центру секции, это позволит удобно разместить контент в контейнере.
К Контейнеру, также как и к Div-блоку и к Секции, можно применить необходимые стили на вкладке Стили (Styles).