Свойство 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 |
Синтаксис
Свойство 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>
Устарело Gecko 62- Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.
"Наследственные" значения отображения
Спецификация уровня 3 подразумевает два значения для свойства display
— позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.
Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:
.container {
display: inline flex;
}
В настоящее время это можно задать с помощью одного значения.
.container {
display: inline-flex;
}
Формальный синтаксис
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>где
<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-list-item | 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, это изменит
его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Display Module Level 3 Определение 'display' в этой спецификации. |
Кандидат в рекомендации | Добавлены run-in , flow , flow-root , contents и multi-keyword значения. |
CSS Ruby Layout Module Level 1 Определение 'display' в этой спецификации. |
Рабочий черновик | Добавлены ruby , ruby-base , ruby-text , ruby-base-container и ruby-text-container . |
CSS Grid Layout Определение 'display' в этой спецификации. |
Кандидат в рекомендации | Добавлены значения модели grid бокс. |
CSS Flexible Box Layout Module Определение 'display' в этой спецификации. |
Кандидат в рекомендации | Добавлены значения модели flexible бокс. |
CSS Level 2 (Revision 1) Определение 'display' в этой спецификации. |
Рекомендация | Добавлены значения модели table и inline-block. |
CSS Level 1 Определение 'display' в этой спецификации. |
Рекомендация | Начальное определение. Базовые значения: none , block , inline и list-item . |
Совместимость с браузерами
BCD tables only load in the browser