| Name: | display |
|---|---|
| Value: | [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> |
| Initial: | встроенный (inline) |
| Applies to: | все элементы |
| Inherited: | нет |
| Percentages: | n/a |
| Computed value: | пара ключевых слов, представляющих внутренний и внешний типы отображения, плюс дополнительный флаг элемента списка ‘list-item‘ или ключевое слово <display-internal> или <display-box>; правила вычисления см. в разделе «Проза» в различных спецификациях. |
| Canonical order: | по грамматике |
| Animation type: | не анимируемый |
Ожидается, что пользовательские агенты будут поддерживать это свойство на всех носителях, включая невизуальные. Свойство ‘display‘ определяет тип отображения display type элемента, который состоит из двух основных характеристик того, как элемент генерирует блоки:
- внутренний тип отображения (inner display type), который определяет (если это не заменяемый элемент) тип контекста форматирования, который он генерирует, диктуя, как размещаются его блоки-потомки. (Внутреннее отображение замененного элемента выходит за рамки CSS.)
- тип внешнего отображения (outer display type), определяющий, как сам основной блок участвует в компоновке потока.
Текстовые прогоны не имеют типа отображения.
Некоторые значения ‘display‘ имеют дополнительные побочные эффекты: например, ‘list-item‘, который также создаёт псевдоэлемент ‘::marker‘, и ‘none‘, из-за которого все поддерево элемента остаётся за пределами дерева блоков.
Свойство ‘display‘ не влияет на семантику элемента: они определяются языком документа и не зависят от CSS. Помимо значения ‘none‘, которое также влияет на звуковой/речевой вывод [CSS-SPEECH-1] и интерактивность элемента и его потомков, свойство ‘display‘ влияет только на визуальный макет: его цель — предоставить дизайнерам свободу изменять поведение макета элемента, не влияя на базовую семантику документа.
Значения определяются следующим образом:
<display-outside> = block | inline | run-in <display-inside> = flow | flow-root | table | flex | grid | ruby <display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item <display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container <display-box> = contents | none <display-legacy> = inline-block | inline-table | inline-flex | inline-grid
В следующей информативной таблице приведены значения отображения ‘display‘:
Примечание
В соответствии с правилами приоритета «самая обратная совместимость, затем самая короткая» сериализация эквивалентных значений ‘display‘ использует столбец «Короткий ‘display‘». [CSSOM]
2.1. Внешние отображаемые роли для Flow Layout: блочные, встроенные и вводные ключевые слова
2.2. Модели внутреннего макета дисплея: ключевые слова потока, корневого потока, таблицы, гибкости, сетки и рубина.
2.3. Генерация блоков маркеров: ключевое слово элемента списка
2.4. Layout-Internal Display Types: ключевые слова table-* и ruby-*
2.5. Генерация коробки: ключевые слова none и content
2.6. Предварительно составленные отображаемые значения на встроенном уровне
2.7. Автоматические преобразования типов блоков
Информационные ссылки
Стандарт CSS Display Module Level 3 — Раздел «2. Box Layout Modes: the display property» — https://drafts.csswg.org/css-display/#the-display-properties
