CSS позиционирование: гайд для начинающих

Этот урок описывает создание простой структуры веб-сайта и позиционирование блоков с помощью CSS.

Создание структуры сайта

Создадим простую структуру сайта с HTML, используя следующие элементы:

• div для контейнеров
• header для шапки
• footer для подвала
• article для основной статьи
• aside для боковой панели

<div id="header"></div>
<div id="article"></div>
<div id="aside"></div>
<div id="footer"></div>

Вместо id можно использовать классы, например class="header".

Стилизация элементов сайта с CSS

Добавим стили с помощью CSS. Зададим ширину, высоту, отступы и другие параметры. Для всего документа установим начальные отступы: margin: 0; padding: 0;.

Для header:

• Ширина: 100%
• Высота: 30px
• Цвет фона: белый
• Нижняя граница: 2px сплошная серебристая линия
• Верхняя граница: 2px сплошная серебристая линия (будет удалена позже)
• Отступ сверху: 50px
• Отступ слева и справа: 10px

#header {
  width: 100%;
  height: 30px;
  background-color: white;
  border-bottom: 2px solid silver;
  border-top: 2px solid silver; /* Удалим позже */
  margin-top: 50px;
  padding: 0 10px;
  box-sizing: border-box;
}

Стиль текста шапки:

#header {
  font-size: 16px;
  color: #333;
}

box-sizing: border-box; включает padding и border в общую ширину элемента, предотвращая вылезание шапки за пределы экрана.

Для footer:

• Отступ сверху: 20px

#footer {
  margin-top: 20px;
}

Для article и aside:

• Цвет фона: #f2f2f2
• Ширина: 70% и 30% соответственно
• Скругленные углы
• Отступ: 5% с каждой стороны
• Отступ сверху: 20px
• box-sizing: border-box;

#article, #aside {
  background-color: #f2f2f2;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5%;
  margin-top: 20px;
}
#article {
  width: 70%;
}
#aside {
  width: 30%;
}

Позиционирование блоков с float

Для горизонтального размещения блоков используется свойство float:

• float: left; — левое выравнивание
• float: right; — правое выравнивание

#article {
    float: left;
}
#aside {
    float: right;
}

При использовании float, родительский элемент может не учитывать высоту дочерних элементов. Для решения этой проблемы используется clear: both;.

Использование clear

Свойство clear очищает действие float для последующих элементов. Добавим div с классом clear:

<div class="clear"></div>

.clear {
    clear: both;
}

Методы позиционирования

Помимо float, существуют другие методы:

• static: Значение по умолчанию. Элемент позиционируется в стандартном потоке.
• relative: Позиционируется относительно своего обычного положения. top, right, bottom, left задают смещение.
• absolute: Позиционируется относительно ближайшего позиционированного родительского элемента (не static). Без такого родителя — относительно документа.
• fixed: Позиционируется относительно области просмотра. Остаётся на месте при прокрутке.

Пример относительного позиционирования:

#someBlock {
    position: relative;
    top: 30px;
}

Урок описывает создание простой структуры веб-сайта с помощью HTML и CSS, используя различные методы позиционирования блоков: float, relative, absolute и fixed. Понимание этих методов важно для создания гибких и адаптивных веб-дизайнов.