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 type | Discrete behavior except when animating to or from `none` is visible for the entire duration |

Синтаксис
---------

Свойство `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:

* Разметка 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>` (en-US) изменить значение свойства `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 (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Спецификации
------------

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Блоковая и Inline разметка нормальном потоке (en-US)
* Formatting contexts explained (en-US)
* `visibility`, `float`, `position`
* `grid`, `flex`