Зарегистрируйтесь для доступа к 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
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время

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

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

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

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