Поток

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 может менять порядок наложения элементов.

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

Автор: Джереми Томас
Последнее изменение: 13.08.2017