CSS | Модуль отображения | Уровень 3 | Режимы макета блока: свойство отображения ‘display’ — efim360.ru

CSS | Модуль отображения | Уровень 3 | Режимы макета блока: свойство отображения 'display'

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 элемента, который состоит из двух основных характеристик того, как элемент генерирует блоки:

Текстовые прогоны не имеют типа отображения.

Некоторые значения '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':

Short display Full display Generated box
none subtree omitted from box tree
contents element replaced by contents in box tree
block block flow block-level block container aka block box
flow-root block flow-root block-level block container that establishes a new block formatting context (BFC)
inline inline flow inline box
inline-block inline flow-root inline-level block container aka inline block
run-in run-in flow run-in box (inline box with special box-tree-munging rules)
list-item block flow list-item block box with additional marker box
inline list-item inline flow list-item inline box with additional marker box
flex block flex block-level flex container
inline-flex inline flex inline-level flex container
grid block grid block-level grid container
inline-grid inline grid inline-level grid container
ruby inline ruby inline-level ruby container
block ruby block ruby block box containing ruby container
table block table block-level table wrapper box containing table grid box
inline-table inline table inline-level table wrapper box containing table grid box
<display-internal> types layout-specific internal box

 

Примечание

В соответствии с правилами приоритета «самая обратная совместимость, затем самая короткая» сериализация эквивалентных значений '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

Поделись записью