Основы CSS верстки для веб-разработчиков

Первый и самый важный принцип, который нужно усвоить раз и навсегда:

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

Этот подход унаследован от полиграфии и вёрстки документов, где элементы тоже имеют свою область. Однако ключевое отличие веба в том, что процесс происходит динамически, «на лету», по правилам, заложенным в браузере. Исходный алгоритм, который управляет этим процессом по умолчанию, называется «нормальным потоком» (Normal Flow). Именно с него начинается любая вёрстка.

<h1>Заголовок</h1>
<p>Параграф текста с <span>выделенным элементом</span> внутри.</p>
<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
</ul>

Когда вы не применяете к элементам специальные свойства для изменения их поведения (вроде display: flex), они располагаются согласно нормальному потоку. Это базовый алгоритм, созданный для отображения текстовых документов. Его логика проста и соответствует чтению: в западных языках элементы выстраиваются слева направо и сверху вниз.

В CSS эти направления имеют специальные имена:

1. Инлайн-направление (inline direction): основное направление текста (по умолчанию — слева направо). В этом направлении выстраиваются так называемые инлайн-элементы (текст, картинки, <span>, <strong>).
2. Блочное направление (block direction): направление, в котором блоки «падают» под действием силы тяжести документа (по умолчанию — сверху вниз). В этом направлении располагаются блочные элементы (заголовки, параграфы <p>, разделы <div>).

Браузеры поставляются со встроенной таблицей стилей, которая определяет, какие теги по умолчанию являются блочными, а какие — строчными. Именно поэтому семантически правильный HTML-документ без единой строчки CSS уже выглядит как структурированная страница.

p {
  /* Блочный элемент: имеет ширину, margin сверху/снизу */
  margin-bottom: 1em;
  width: 80%;
  max-width: 600px;
}

strong {
  /* Инлайн-элемент: обтекает текст, не ломает поток */
  color: #d35400;
  font-weight: bold;
}

Понимание того, что всё — это бокс, приводит нас к ключевой концепции: блочной модели (Box Model). Она описывает, как вычисляются размеры каждого бокса. Он состоит из нескольких концентрических слоев, начиная от центра:

1. Контент: внутренняя область, где отображается текст или дочерние элементы. Её размеры можно задать через width и height.
2. Внутренний отступ: прозрачная область вокруг контента, отделяющая его от границы. Задаётся свойством padding.
3. Граница: линия (или стиль), окружающая padding и контент. Задаётся свойством border.
4. Внешний отступ: прозрачная область вне границы, которая отталкивает соседние элементы. Задаётся свойством margin.

Здесь кроется историческая сложность: по умолчанию в браузерах используется модель content-box. В ней свойство width: 200px задаёт ширину только области контента. padding и border добавляются к ней снаружи, в итоге реальная ширина элемента становится больше.

.box-content {
  box-sizing: content-box; /* Значение по умолчанию */
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  /* Фактическая ширина = 200px + 20px (левый паддинг) + 20px (правый паддинг) + 5px (левая граница) + 5px (правая граница) = 250px */
}

Для упрощения жизни разработчиков появилась модель border-box. В ней width: 200px задаёт ширину всего бокса целиком, включая padding и border. Область контента при этом сжимается, чтобы уместить эти значения. Эта модель интуитивно понятнее и стала стандартом де-факто.

.box-border {
  box-sizing: border-box; /* Рекомендуемое значение */
  width: 200px;
  padding: 20px;
  border: 5px solid green;
  /* Фактическая ширина остаётся 200px! */
  /* Ширина контента = 200px - 20px - 20px - 5px - 5px = 150px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

Поведение инлайн-боксов существенно отличается от блочных. Поскольку они существуют внутри строк текста, их вертикальные отступы (margin-top, margin-bottom) и явные высоты не работают. Их границы и отступы также ведут себя неочевидно: если инлайн-элемент переносится на несколько строк, его бокс визуально «разрывается».

<p>Это длинный текст, и вот <span class="highlight">этот выделенный инлайн-элемент</span> может вести себя странно при переносе.</p>

.highlight {
  background-color: yellow;
  padding: 0 5px; /* Работает */
  margin: 0 10px; /* Работает по горизонтали */
  /* margin-top: 20px; НЕ РАБОТАЕТ! */
  border-left: 2px solid red;
  border-top: 2px solid red; /* Визуально разорвётся при переносе */
}

Схлопывание вертикальных отступов

Ещё одна «магия» нормального потока — схлопывание вертикальных отступов (Margin Collapse). Когда два блочных элемента расположены друг под другом, вертикальное пространство между ними определяется не суммой их отступов (margin-bottom первого + margin-top второго), а большим из этих двух значений. Это поведение унаследовано от типографики для равномерного распределения абзацев.

.block-a {
  margin-bottom: 40px;
  background: lightblue;
}

.block-b {
  margin-top: 20px; /* Этот отступ СХЛОПНЕТСЯ с margin-bottom: 40px сверху */
  background: lightcoral;
}
/* Итоговое расстояние между элементами — 40px, а не 60px. */

Схлопывание также происходит между родителем и первым/последним дочерним элементом, если между ними нет «преграды» (границы, внутреннего отступа или контента). Чтобы его предотвратить, можно:

1. Добавить родителю padding-top: 1px или border-top: 1px solid transparent.
2. Использовать более современный и чистый способ: создать новый контекст форматирования с помощью display: flow-root.

.parent {
  display: flow-root; /* Лучший способ предотвратить схлопывание */
  background: #eee;
}

.child {
  margin-top: 30px; /* Теперь отступ останется внутри родителя */
}

Алгоритм позиционирования (Positioning) позволяет нам вручную управлять расположением боксов, вплоть до полного вывода их из нормального потока. Это ключ к созданию сложных, многослойных интерфейсов. Активируется свойством position.

Знание того, как работает margin в связке с фиксированной шириной, позволяет легко центрировать блочный элемент.

.centered-block {
  width: min(600px, 100%); /* Фиксированная или процентная ширина */
  margin-left: auto; /* Браузер вычисляет отступ слева */
  margin-right: auto; /* Браузер вычисляет отступ справа */
  /* Доступное пространство по горизонтали делится поровну между двумя auto-отступами. */
}

Когда мы начинаем двигать элементы с помощью позиционирования, они могут начать перекрывать друг друга. Так мы входим в третье измерение CSS — глубину, управляемую свойством z-index. Однако z-index работает не в вакууме, а внутри контекстов наложения (Stacking Context).

Контекст наложения — это изолированный слой. z-index элемента влияет только на его положение внутри контекста наложения своего родителя. Самый распространённый способ создать новый контекст — задать элементу position (кроме static) и z-index (кроме auto). Это же делают opacity < 1, transform, filter и другие свойства.

Проблема

Элемент с z-index: 1000 может быть перекрыт элементом с z-index: 1, если первый находится внутри контекста наложения с низким z-index, а второй — в контексте с более высоким.

<div class="parent-a" style="position: relative; z-index: 1;">
  <div class="child" style="position: absolute; z-index: 1000;">Я внутри parent-a</div>
</div>
<div class="parent-b" style="position: relative; z-index: 2;">
  <div class="child" style="position: absolute; z-index: 1;">Я внутри parent-b</div>
</div>

В этом примере синий блок (z-index: 1) будет поверх фиолетового (z-index: 1000), потому что контекст наложения parent-b (z-index: 2) находится выше parent-a (z-index: 1).

Для явного создания контекста без побочных эффектов позиционирования используйте isolation: isolate.

.modal-overlay {
  isolation: isolate; /* Создаёт новый контекст наложения */
  /* Теперь z-index детей модального окна не будет «конкурировать» с z-index элементов вне этого оверлея */
}

Если нормальный поток и позиционирование решали задачи вёрстки документов, то Flexbox и Grid были созданы для построения сложных, адаптивных интерфейсов веб-приложений. Они представляют собой принципиально иные, более мощные и предсказуемые алгоритмы компоновки.

Flexbox (одномерная компоновка) фокусируется на распределении пространства и выравнивании элементов вдоль одной оси (горизонтальной или вертикальной). Его философия — дать контейнеру возможность гибко управлять размерами и порядком своих непосредственных детей.

.flex-container {
  display: flex; /* Включаем алгоритм Flexbox */
  justify-content: space-between; /* Распределяем дочерние элементы по главной оси */
  align-items: center; /* Выравниваем элементы по поперечной оси по центру */
  flex-wrap: wrap; /* Позволяем перенос на новую строку */
}

.flex-item {
  flex: 1 1 200px; /* Сочетание роста, сжатия и базового размера */
}

CSS Grid (двумерная компоновка) позволяет вам сначала определить сетку (строки и колонки), а затем точно размещать элементы в созданных областях. Это делает Grid идеальным для макетов всего сайта.

.grid-container {
  display: grid; /* Включаем алгоритм Grid */
  grid-template-columns: 1fr 2fr 1fr; /* Определяем три колонки */
  grid-template-rows: auto 1fr auto; /* Определяем три строки */
  gap: 20px; /* Расстояние между элементами сетки */
  grid-template-areas:
    "header header header"
    "sidebar main ads"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Ключевое отличие от старой модели: и Flexbox, и Grid используют современную, единую систему выравнивания (align-items, justify-content), которая больше не зависит от свойств шрифта (как vertical-align) и работает предсказуемо, ориентируясь на границы боксов.

CSS развивается в сторону независимости от физического направления. Не все языки пишутся слева направо (арабский, иврит), а некоторые — сверху вниз (классический китайский, японский). Логические свойства заменяют физические понятия («верх», «низ», «лево», «право») на логические, связанные с режимом письма (writing-mode).

• Вместо width/height — inline-size/block-size.
• Вместо margin-left — margin-inline-start.
• Вместо top/bottom при позиционировании — inset-block-start/inset-block-end.

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

.card {
  /* Физические свойства */
  margin-left: 1rem;
  padding-top: 2rem;
  border-right: 2px solid;

  /* Логические эквиваленты (рекомендуется) */
  margin-inline-start: 1rem;
  padding-block-start: 2rem;
  border-inline-end: 2px solid;
}
/* Если поменять writing-mode родителя, логические свойства адаптируются автоматически. */

Освоение CSS-верстки — это не заучивание сотен свойств, а понимание нескольких ключевых систем и их взаимодействия. Начните с прочного фундамента: боксовая модель и нормальный поток. Затем освойте механизмы выхода из потока — позиционирование. Только после этого переходите к мощным инструментам компоновки — Flexbox и Grid. Понимание контекстов наложения и логических свойств станет завершающим штрихом, который превратит вас из того, кто «подбирает стили», в того, кто уверенно проектирует макеты.

Хотите перейти от теории к практике и научиться применять эти концепции для создания современных, адаптивных и сложных интерфейсов под руководством опытных наставников? Запишитесь на наш интенсивный онлайн-курс по продвинутому CSS и вёрстке в нашей веб-студии. Мы разберём реальные кейсы, выстроим чёткую систему знаний, и вы начнёте не бояться макетов, а управлять ими.