Использование синтаксиса с несколькими ключевыми словами в CSS display

Одно из первых, чему мы учимся в CSS, это то, что некоторые элементы являются блочными, а некоторые — строчными. Это их внешние типы отображения. Например, <h1> или <p> по умолчанию являются блочными, а <span> — строчными. С помощью свойства display мы можем переключаться между блочным и строчным отображением. Например, чтобы сделать заголовок строчным, мы можем использовать следующий CSS:

h1 {
  display: inline;
}

Свойство display также позволяет нам использовать CSS сетку и Flexbox, когда display: grid или display: flex установлены. Важно понять, что изменение значения display элемента может изменить контекст форматирования его непосредственных потомков. Когда вы используете display: flex или display: grid, потомки элемента становятся элементами flex или сетки и реагируют на свойства в спецификациях сетки и flexbox.

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

Например, когда мы используем display: flex, мы создаём блочный контейнер с потомками flex. Потомками описываются как участвующие в контексте форматирования flex. Это можно увидеть, если вы возьмете <span> — обычно строчный элемент — и примените к нему display: flex. <span> станет блочным элементом. Он ведёт себя как блочные элементы в отношениях с другими блоками в макете. Это как если бы вы применили display: block к span, но мы также получаем изменённое поведение потомков.

В примере ниже показан <span> с применённым display: flex. Он стал блочным блоком, занимающим всё доступное пространство в строчном направлении. Теперь вы можете использовать justify-content: space-between для добавления пробела между двумя элементами flex.

Также возможно создать строчные контейнеры flex. Если вы используете единственное значение inline-flex, у вас будет строчный блок с потомками flex. Потомками ведут себя так же, как потомки flex-контейнера блочного типа. Единственное, что изменилось, это то, что родительский элемент теперь является строчным блоком. Следовательно, он ведёт себя как другие строчные элементы и не занимает всю ширину (или размер в строчном измерении), которую занимает блочный блок. Это означает, что некоторый следующий текст может появиться рядом с контейнером flex.

То же самое верно и при работе с сеткой. Использование display: grid даст вам блочный блок, который создаёт контекст форматирования сетки для непосредственных потомков. Использование display: inline-grid создаст строчный блок, который создаёт контекст форматирования сетки для потомков.

Как видно из вышеизложенного, свойство display обладает значительными возможностями. В дополнение к указанию того, является ли что-то блочным или строчным по отношению к другим блокам на странице, оно также указывает контекст форматирования внутри блока, к которому оно применено. Для лучшего описания этого поведения свойство display позволяет установить два значения — внешнее и внутреннее — для него. Также допустим оригинальный синтаксис с одним значением.

Это означает, что вместо установки display: flex для создания блочного блока с потомками flex мы используем display: block flex. Вместо display: inline-flex для создания строчного блока с потомками flex мы используем display: inline flex. Пример ниже демонстрирует эти значения.

Есть соответствия для всех существующих значений display; наиболее распространённые из них перечислены в таблице ниже. Чтобы увидеть полный список, ознакомьтесь с таблицей в спецификации свойства display.

Что касается того, как синтаксис с несколькими значениями помогает прояснить макет CSS, мы можем рассмотреть некоторые значения в таблице выше, которые могут быть менее знакомы вам. Множественное значение display: block flow-root соответствует одному значению; display: flow-root. Цель этого значения — только создание нового контекста форматирования блока (BFC). BFC гарантирует, что всё внутри вашего блока остаётся внутри, и элементы снаружи не могут вторгаться в него.

В примере ниже два <p> элемента, один внутри <div> демонстрируют, как значения display влияют на контексты форматирования. Первый <div> элемент с элементами управления демо скрыт, чтобы мы могли сосредоточиться на последующих элементах. Элементы, на которых мы должны сосредоточиться, — это «родитель», «ребёнок» и «брат» <div> и <p> элементы, которые можно отличить по их идентификаторам.

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

Измените выбранный параметр в элементе <select> , чтобы увидеть эффект разных значений display. Вы можете использовать любое значение с flow-root для создания нового контекста форматирования для родителя, делая отступ дочернего элемента относительным к внешнему краю его родителя и избегая слияния отступов. Переключение между display: flow-root и display: block flow-root достигнет того же эффекта, что и ключевое слово с одним значением flow-root.

div,
p {
  outline: 2px solid black;
  background-color: cornflowerblue;
  display: block;
  margin-bottom: 2rem;
}

#parent {
  background-color: oldlace;
  min-height: 2rem;
}

#child {
  margin-top: 4rem;
  outline: 2px dashed red;
}

#sibling {
  background-color: lavender;
}

<div id="parent">
  <p id="child">The #child paragraph (nested in #parent).</p>
</div>
<p id="sibling">The #sibling paragraph (sibling of #parent).</p>

Значение flow-root имеет смысл, если вы подумаете о блочном и строчном макетах, которые иногда называют нормальным потоком. Наша страница HTML создаёт новый контекст форматирования (плавающие элементы и отступы не могут выходить за границы), и наше содержимое выстраивается в нормальном потоке, используя блочный и строчный макет, пока мы не изменим значение display , чтобы использовать другой контекст форматирования. Создание контейнера сетки или flex также создаёт новый контекст форматирования (соответственно, контекст форматирования сетки или flex). Они также содержат всё, что находится внутри них. Однако, если вы хотите содержать плавающие элементы и отступы, но продолжать использовать блочный и строчный макет, вы можете создать новый корень потока и начать заново с блочным и строчным макетом. С этого момента всё содержится внутри нового корня потока.

Вот почему display: flow-root может быть записано с помощью синтаксиса с несколькими ключевыми словами display: block flow-root. Вы создаёте контекст форматирования блока, с блочным блоком и потомками, участвующими в нормальном потоке. А как насчёт сопоставленной пары display: inline flow-root? Это текущий способ описания display: inline-block.

Значение display: inline-block существует с ранних дней CSS. Мы используем его, чтобы позволить отступам отодвигать строчные элементы от элемента, например, при создании элементов навигации или при добавлении фона с отступом к строчному элементу, как в примере ниже.

Элемент с display: inline-block также будет содержать плавающие элементы. Он содержит всё, что находится внутри строчного блока. Следовательно, display: inline-block делает точно то же, что и display: flow-root , но со строчным, а не блочным блоком. Синтаксис с двумя значениями точно описывает, что происходит с этим значением. В примере выше вы можете изменить display: inline-block на display: inline flow-root и получить тот же результат.

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

Для работы с одиночными значениями display спецификация объясняет, что делать, если используется только внешнее значение block или inline:

"Если указано значение <display-outside>, но <display-inside> опущено, внутренний тип отображения элемента по умолчанию — flow."

Это означает, что поведение точно такое же, как и в мире с одиночными значениями. Если вы указываете display: block или display: inline, это изменяет внешнее значение отображения блока, но любые дочерние элементы продолжают работать в обычном потоке. Если указано только внутреннее значение flex, grid, или flow-root, то спецификация объясняет, что внешнее значение должно быть установлено на block:

"Если указано значение <display-inside>, но <display-outside> опущено, внешний тип отображения элемента по умолчанию — block, за исключением ruby, для которого по умолчанию используется inline."

Наконец, у нас есть некоторые устаревшие предварительно составленные значения уровня inline:

• inline-block
• inline-table
• inline-flex
• inline-grid

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

• inline flow-root
• inline table
• inline flex
• inline grid

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