Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Поток документа CSS: Позиционирование элементов

Потоком документа в HTML называется порядок вывода элементов на страницу. В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа. Этот порядок можно менять, и этому будет посвящён данный курс.

Перед тем, как рассмотреть возможные потоки документа, стоит вспомнить, как выводятся блочные и строчные элементы.

При создании разметки блочные элементы выводятся друг под другом так, как это было указано в HTML-документе. Такая вёрстка:

<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>

ожидаемо выведет нам друг под другом три фразы:

Блок 1
Блок 2
Блок 3

Это достигается благодаря тому, что браузеры используют определённые правила, по которым они выводят элементы на экран. Главным свойством блочных элементов является то, что они занимают всю ширину, поэтому все блочные элементы выводятся друг под другом.

Представьте, что вы кладёте коробки в ящик. Ширины ящика недостаточно, чтобы расположить коробки рядом, поэтому единственный доступный вариант — класть их друг на друга. Именно так и ведут себя блочные элементы при отображении браузером.

Свойство block в CSS

Помимо блочных элементов в HTML существуют строчные элементы. Главное их отличие в том, что они занимают не всю доступную им ширину, а только ту ширину, которая необходима для отображения контента внутри элемента. Из-за этого несколько идущих подряд строчных элементов будут выведены друг за другом, без переноса строки. Данное поведение также является стандартным для всех браузеров.

Такое поведение можно сравнить с расположением небольших ящиков на полке. Места достаточно, чтобы расположить их в ряд.

Свойство inline в CSS

Схема, при которой блочные и строчные HTML-элементы выводятся друг за другом в том порядке, в котором они размечены в файле, называется "Нормальный поток документа".

С помощью CSS-правил возможно вывести элемент из нормального потока. Существуют ещё несколько типов потока документа:

  • Плавающий поток. Создаётся с использованием CSS-свойства float.
  • Поток с абсолютным позиционированием. Создаётся с использованием свойства position: absolute. В следующих уроках мы подробнее его рассмотрим. Сейчас же достаточно знать, что при абсолютном позиционировании элемент "выдёргивается" из потока и его можно разместить в любой части документа.

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

Свойство float в CSS


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
30 марта 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
20 апреля 4 месяца
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
30 марта 16 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Инженер по автоматизированному тестированию на JavaScript
Профессия
Новый В разработке с нуля
Автоматизированное тестирование веб-приложений на JavaScript
дата определяется 10 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»