display

Свойство display (CSS) определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.

css

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;
Начальное значениеinline
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного.
Animation typeDiscrete behavior but when animating from none swaps to end value at progress > 0 rather than 0.5

Синтаксис

Свойство display задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:

<display-outside>

Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.

<display-inside> (en-US)

Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).

<display-listitem>

Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.

<display-internal> (en-US)

Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.

<display-box> (en-US)

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

<display-legacy> (en-US)

В CSS 2 используется синтаксис с одним ключевым словом для свойства display, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.

<display-xul> Non-standard Устарело

Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

"Наследственные" значения отображения

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

css

.container {
  display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

css

.container {
  display: inline-flex;
}

Формальный синтаксис

display = 
[ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US) | (en-US)
<display-listitem> | (en-US)
<display-internal> | (en-US)
<display-box> | (en-US)
<display-legacy> | (en-US)
<display-outside> || (en-US) [ (en-US) <display-inside> | (en-US) math ] (en-US)

<display-outside> =
block | (en-US)
inline | (en-US)
run-in

<display-inside> =
flow | (en-US)
flow-root | (en-US)
table | (en-US)
flex | (en-US)
grid | (en-US)
ruby

<display-listitem> =
<display-outside>? (en-US) && (en-US)
[ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US) && (en-US)
list-item

<display-internal> =
table-row-group | (en-US)
table-header-group | (en-US)
table-footer-group | (en-US)
table-row | (en-US)
table-cell | (en-US)
table-column-group | (en-US)
table-column | (en-US)
table-caption | (en-US)
ruby-base | (en-US)
ruby-text | (en-US)
ruby-base-container | (en-US)
ruby-text-container

<display-box> =
contents | (en-US)
none

<display-legacy> =
inline-block | (en-US)
inline-table | (en-US)
inline-flex | (en-US)
inline-grid

Примеры

В разделе Syntax содержатся несколько примеров для разных типов значений display, которые это свойство может принимать.

Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:

Доступность

display: none;

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

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

display: contents;

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

Таблицы

Если у элемента <table> (en-US) изменить значение свойства display на block, grid или flex, это изменит его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

Спецификации

Specification
CSS Display Module Level 3
# the-display-properties

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также