display
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Свойство 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;
Начальное значение | inline |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного. |
Animation type | Discrete behavior except when animating to or from none is visible for the entire duration |
Синтаксис
Свойство 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>
Non-standard Устарело-
Значения, используемые только в 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.
Таблицы
Если у элемента <table>
изменить значение свойства display
на block
, grid
или flex
, это изменит его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.
Спецификации
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
Совместимость с браузерами
BCD tables only load in the browser