Модель визуального форматирования

В непрерывных носителях область просмотра — это область просмотра окна браузера. Пользовательские агенты могут изменять разметку страницы при изменении размера области просмотра — например, при изменении размера окна или изменении ориентации мобильного устройства.

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

Генерация блоков — это часть модели визуального форматирования CSS, которая создаёт блоки из элементов документа. Сгенерированные блоки бывают разных типов, которые влияют на их визуальное форматирование. Тип создаваемого блока зависит от значения свойства CSS display.

Изначально определённое в CSS2, свойство display расширено в модуле CSS Display Level 3. Кроме того, некоторые термины, связанные с отображением, были обновлены и уточнены за годы, прошедшие с момента создания CSS2.

CSS берёт ваш исходный документ и отображает его на холсте. Для этого он генерирует промежуточную структуру — дерево блоков, которая представляет собой структуру форматирования отображаемого документа. Каждый блок в дереве блоков представляет соответствующий элемент (или псевдоэлемент) в пространстве и/или во времени на холсте, а каждая строка текста в дереве блоков аналогично представляет содержимое соответствующих узлов текста.

Затем для каждого элемента CSS генерирует ноль или более блоков, как указано значением свойства display этого элемента.

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

Некоторые элементы могут генерировать дополнительные блоки помимо основного, например display: list-item генерирует более одного блока (например, основной блочный блок и маркер дочернего блока). А некоторые значения (например, none или contents) приводят к тому, что элемент и/или его потомки не генерируют никаких блоков вообще.

Анонимный блок создаётся, когда нет HTML-элемента для использования в качестве блока. Такая ситуация возникает, например, когда вы объявляете display: flex на родительском элементе, и непосредственно внутри находится строка текста, не содержащаяся в другом элементе. Для исправления дерева блоков создаётся анонимный блок вокруг этой строки текста. Затем он будет вести себя как элемент flex, однако его нельзя нацелить и стилизовать как обычный блок, поскольку нет элемента для нацеливания.

<div class="flex">
  I am wrapped in an anonymous box
  <p>I am in the paragraph</p>
  I am wrapped in an anonymous box.
</div>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.flex {
  display: flex;
}

.flex > * {
  background-color: rebeccapurple;
  color: white;
}

То же самое происходит, когда у вас есть строки текста, перемежающиеся с блочными элементами. В следующем примере у меня есть строка внутри <div>; посередине моей строки находится элемент <p>, содержащий часть текста.

<div class="example">
  I am wrapped in an anonymous box
  <p>I am in the paragraph</p>
  I am wrapped in an anonymous box.
</div>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.example > * {
  background-color: rebeccapurple;
  color: white;
}

Строка разбивается на три блока в дереве блоков. Часть строки перед элементом абзаца заключена в анонимный блок, затем у нас есть <p>, который генерирует блок, и затем ещё один анонимный блок.

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

Анонимные строчные блоки создаются, когда строка разбивается строчным элементом, например, предложение, содержащее выделенный фрагмент, обернутый <em></em>. Это разбивает предложение на три строчных блока — анонимный строчный блок перед выделенным фрагментом, фрагмент, обернутый элементом <em>, и, наконец, заключительный анонимный строчный блок. Как и в случае с анонимными блочными блоками, этими анонимными строчными блоками нельзя управлять независимо так, как можно управлять <em>; они просто наследуют стили своего контейнера.

Другие контексты форматирования также создают анонимные блоки. Сетка ведёт себя так же, как пример flexbox выше, преобразуя строки текста в элемент сетки с анонимным блоком. Многоколоночная разметка создаёт анонимные колоночные блоки вокруг колонок; их также нельзя стилизовать или нацелить каким-либо другим способом. Таблица добавит анонимные блоки для создания правильной табличной структуры — например, добавит анонимную строку таблицы — если не было блока с display: table-row.

Строчные блоки — это блоки, которые обёртывают каждую строку текста. Вы можете увидеть разницу между строчными блоками и их содержащим блоком, если вы поместите элемент в плавающий режим, а затем следуйте за ним блоком, у которого есть цвет фона.

В следующем примере строчные блоки, следующие за плавающим элементом <div> , укорачиваются для обёртывания вокруг плавающего элемента. Фон блока проходит позади плавающего элемента, поскольку плавающий элемент был выведен из потока.

<div class="float"></div>
<p class="following">
  This text is following the float, the line boxes are shortened to make room
  for the float but the box of the element still takes position in normal flow.
</p>

body {
  font: 1.2em sans-serif;
  margin: 20px;
}

.float {
  float: left;
  width: 150px;
  height: 150px;
  background-color: rebeccapurple;
  margin: 20px;
}

.following {
  background-color: #ccc;
}

В CSS блок может быть размещён в соответствии с тремя схемами позиционирования — нормальным потоком, плавающими элементами или абсолютным позиционированием.

В CSS нормальный поток включает блочное форматирование блочных блоков, строчное форматирование строчных блоков, а также относительное и фиксированное позиционирование блочных и строчных блоков.

Подробнее о потоковой разметке в CSS.

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

Узнайте больше о плавающих элементах.

В модели абсолютного позиционирования (которая также включает fixed позиционирование) блок полностью удаляется из нормального потока и назначается положение относительно содержащего блока (который является областью просмотра в случае фиксированного позиционирования) или к одному или нескольким якорям в позиционировании CSS с якорями.

Элемент называется вне потока, если он с плавающим элементом, абсолютно позиционирован или является корневым элементом. Элемент называется в потоке, если он не находится вне потока.

Читайте о позиционированной разметке CSS.

Блоки можно описать как имеющие внешний тип отображения, который является block или inline. Этот внешний тип отображения определяет, как блок ведет себя рядом с другими элементами на странице.

Блоки также имеют внутренний тип отображения, определяющий поведение их потомков. Для обычной компоновки блоков и inline-элементов, или для обычного потока, этот тип отображения равен flow. Это означает, что дочерние элементы также будут либо block или inline.

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

Взаимодействия между блочными и inline-блоками описаны в справочнике свойства display.

Кроме того, справки по конкретным значениям display объясняют, как эти контексты форматирования работают с точки зрения компоновки блоков.

• Модуль CSS-сетки
• Модуль CSS гибкой компоновки
• Модуль многоколоночной компоновки CSS
• Модуль CSS таблиц
• Модуль списков и счётчиков CSS

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

Независимые контексты форматирования содержат плавающие элементы, и отступы не схлопываются через границы контекста форматирования. Таким образом, создание нового контекста форматирования блоков может гарантировать, что плавающие элементы и отступы остаются внутри блока. Для этого добавьте display: flow-root к блоку, для которого нужно создать новый контекст форматирования блоков.

Следующий пример демонстрирует эффект display: flow-root. Блок с чёрным фоном, похоже, обтекает плавающий элемент и текст. Если убрать display: flow-root, плавающий элемент будет выступать за пределы нижней части блока, так как он больше не содержится в нём.

<div class="container">
  <div class="item">Floated</div>
  <p>Text following the float.</p>
</div>

.container {
  display: flow-root;
}

.item {
  margin: 10px;
  float: left;
}

В спецификациях блочные блоки, блочные элементы и блочные контейнеры часто упоминаются как блочные блоки в некоторых местах. Эти понятия несколько отличаются, и термин «блочный блок» следует использовать только в случае отсутствия неоднозначности.

Блочные контейнеры

Блочный контейнер содержит только inline-элементы, участвующие в контексте форматирования inline, или только блочные элементы, участвующие в контексте форматирования блоков. По этой причине мы видим описанное выше поведение, где вводятся анонимные блоки, чтобы гарантировать, что все элементы могут участвовать в блочном или inline-контексте форматирования. Элемент является блочным контейнером только в том случае, если он содержит блочные или inline-элементы.

Inline-элементы и блочные элементы

Это блоки, содержащиеся внутри блочного контейнера, участвующие в inline или блочной компоновке соответственно.

Блочные блоки

Блочный блок — это блочный элемент, который также является блочным контейнером. Как описано в CSS display, блок может быть блочным элементом, но не обязательно блочным контейнером (например, он может быть контейнером flex или grid).

• Руководство по синтаксису CSS
• Комментарии
• Универсальность
• Наследование
• Контекст стекирования
• Контекст форматирования блоков
• Модель блоков
• Режимы компоновки
• Схлопывание отступов
• Элементы-замены
• VisualViewport интерфейс
• Контейнер прокрутки