Поток

HTML документ представляет собой живой документ.

Даже без какого-либо применения CSS, HTML-документ уже содержит свои собственные правила:

• изменчивость: как содержимое адаптируется к размерам браузера;
• очерёдность: порядок, в котором появляются элементы;
• наложение: как элементы появляются друг над другом.

Это естественное поведение является логичным.

Изменчивость

В HTML содержимое — это король.

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

• width: 100%
  Блок будет занимать всю доступную ширину.
• Перенос слов
  Если встроенное содержимое в блоке не помещается на одной строке, оно будет продолжено на новой строке.
• height: auto
  Высота блока изменяется автоматически, чтобы она соответствовала размеру его содержимого.

• Блочный элемент по умолчанию занимает полную ширину.
• Значение height равно высоте его содержимого.

Очерёдность

Элементы HTML отображаются в том порядке, в котором они записаны в коде. Первый в коде — первый в браузере.

Каждый блок появляется в том порядке, в котором он появляется в коде HTML, сверху вниз.

<p>Первый</p>
<p>Второй</p>
<p>Третий</p>
<p>Четвёртый</p>
<p>Пятый</p>

Наложение

У браузера есть три измерения.

Каждый элемент HTML принадлежит воображаемому слою.

Порядок наложения зависит от того, как элементы вложены друг в друга: дочерние элементы появляются поверх своих родителей.

• Каждый вложенный элемент появляется поверх своего родителя.
• Чем глубже он по иерархии, тем выше в наложении.

<div>
  Этот родитель позади
  <p>
    Этот вложенный дочерний элемент появляется <strong>поверх</strong> своего родителя
  </p>
</div>

Нарушение потока

Хотя поведение браузера по умолчанию является эффективным, этого бывает недостаточно для нужд вашего дизайна.

Некоторые свойства CSS позволяют нарушить поток:

• height и width могут поменять изменчивость элемента;
• float нарушает поведение элемента, а также его окружения;
• значения absolute и fixed у свойства position удаляют элемент из потока;
• z-index может менять порядок наложения элементов.

Перейти к заданиям