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

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

/* <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;

Синтаксис

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

<display-outside>

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

<display-inside>

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

<display-listitem>

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

<display-internal>

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

<display-box>

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

<display-legacy>

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

<display-xul>Не стандартноУстарело

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

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

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

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

.container {  display: inline flex;}

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

.container {  display: inline-flex;}

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

display =
[<display-outside>||<display-inside>]|
<display-listitem>|
<display-internal>|
<display-box>|
<display-legacy>|
<display-outside>||[<display-inside>|math]

<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

Примеры

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

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

• Разметка CSS Grid
• Разметка CSS Flexible box
• Разметка CSS (Модуль обучения для начинающих)

Доступность

display: none;

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

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

display: contents;

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

• Display: Contents Is Not a CSS Reset | Adrian Roselli
• More accessible markup with display: contents — hiddedevries.nl

Таблицы

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

• Short note on what CSS display properties do to table semantics — The Paciello Group
• Hidden content for better a11y | Go Make Things
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

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

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

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

• Блоковая и Inline разметка нормальном потоке
• Formatting contexts explained
• visibility,float,position
• grid,flex