Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Резюме

Свойство display CSS указывает тип поля рендеринга, используемого для элемента. В HTML значения свойств display по умолчанию берутся из поведения, описанного в спецификациях HTML, или из таблицы стилей по умолчанию для браузера/пользователя. Значение по умолчанию в XML является inline, включая элементы SVG.

В дополнение ко многим различным типам ящиков, значение none позволяет отключить отображение элемента; когда вы используете none, все элементы-потомки также отключены. Документ отображается так, как будто этот элемент не существует в дереве документов.

Начальное значениеinline
Применяется квсе элементы
Наследуетсянет
Отображениевсё
Обработка значениякак указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного.
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Обзор

/* <display-outside> значения */
display: block;
display: inline;
display: run-in;

/* <display-inside> значения */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> значения */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> значения */
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> значения */
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> значения */
display: contents;
display: none;

/* <display-legacy> значения */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/ * Глобальные значения * /
display: inherit
display: initial
display: unset

Синтаксис

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

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

Значения

display-value

Is a keyword defining the rendering type to apply to the element. Its possible values and their meanings are: 
 
 
<display-outside>
Эти ключевые слова определяют внешний тип отображения элемента, который по существу является его ролью в макете потока. Они определяются следующим образом:
Значение Описание
block


Элемент генерирует поле блока элементов.

inline Элемент генерирует один или несколько встроенных блоков элементов.
run-in Элемент генерирует окно ввода. Элементы запуска действуют как ряды или блоки, в зависимости от окружающих элементов. То есть:
  • Если поле запуска содержит блок-бокс, то же, что и блок.
  • Если блок-бокс следует за окном запуска, поле ввода становится первым встроенным полем блока.
  • Если появляется встроенный блок, поле ввода становится блочным боксом.
<display-inside>
Эти ключевые слова определяют внутренний тип отображения элемента, который определяет тип контекста форматирования, который излагает его содержимое (при условии, что он является незаменимым элементом). Они определяются следующим образом:
Значение Описание
flow Элемент выводит его содержимое с помощью компоновки потока (блок-и-встроенный макет). Если его внешний тип отображения является встроенным или запущенным, и он участвует в контексте блока или встроенного форматирования, он генерирует встроенный блок. В противном случае он создает контейнер контейнера блоков.
В зависимости от значения других свойств (например, position, float, или overflow) и сам ли он участвует в контексте блочного или встроенного форматирования он либо устанавливает новый контекст форматирования блока  block formatting context  для своего содержимого, либо интегрирует содержимое в свой родительский формат. 
flow-root Элемент генерирует поле блока элементов, которое устанавливает новый формат  блока. block formatting context.
table Эти элементы ведут себя как <table>  HTML-элементы. Они определяют блок-уровень.
flex Элемент ведет себя как элемент блока и выдаёт содержимое как flexbox model.
grid Элемент ведет себя как элемент блока и выдаёт  содержимое в соответствии с моделью сетки.
subgrid Если родительский элемент имеет display:grid, сам элемент и его содержимое выкладываются в соответствии с моделью сетки.
ruby Элемент ведет себя как встроенный элемент и выдает его содержимое в соответствии с моделью форматирования рубина. Он ведет себя как соответствующие элементы <ruby> HTML.
<display-listitem>

Элемент генерирует блок-бокс для содержимого и отдельный встроенный блок списка-элемента.

Если значение <display-inside> не указано, внутренний тип отображения основного окна по умолчанию имеет значение flow.
Если значение <display-outside> не указано, значение основного окна по умолчанию равно block.

<display-internal>

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

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

Значение Описание
table-row-group Эти элементы ведут себя как <tbody> HTML элементы.
table-header-group Эти элементы ведут себя как <thead> HTML элементы.
table-footer-group Эти элементы ведут себя как <tfoot> HTML элементы.
table-row Эти элементы ведут себя как <tr> HTML элементы.
table-cell Эти элементы ведут себя как <td> HTML элементы.
table-column-group Эти элементы ведут себя как <colgroup> HTML элементы.
table-column Эти элементы ведут себя как <col> HTML элементы.
table-caption Эти элементы ведут себя как <caption> HTML элементы.
ruby-base Эти элементы ведут себя как <rb> элементы.
ruby-text Эти элементы ведут себя как <rt> элементы.
ruby-base-container Эти элементы ведут себя как <rbc> элементы, созданные как анонимные поля.
ruby-text-container Эти элементы ведут себя как <rtc> элементы.
<display-box>
Эти значения определяют, генерирует ли элемент все поля.
Значение Описание
contents Эти элементы сами по себе не создают отдельную коробку. Они заменяются их псевдо-коробкой и их дочерними ящиками.
Обратите внимание, что спецификация CSS Display Level 3 определяет, как значение contents должно влиять на «необычные элементы» - элементы, которые не визуализируются исключительно с помощью концепций окна CSS, таких как замещенные элементы.
Больше подробностей. Appendix B: Effects of display: contents on Unusual Elements .
none

Отключает отображение элемента, так что он не влияет на макет (документ отображается так, как если бы элемент не существовал). Все элементы потомков также отключены.

Чтобы элемент занимал пространство, которое он обычно занимал, но без какого-либо визуализации ничего не использовал, вместо этого используйте свойство visibility .

<display-legacy>
В CSS 2 использовался синтаксис с одним ключевым словом display , требующий отдельных ключевых слов для вариантов уровня блока и встроенного уровня одного и того же режима макета. Они определяются следующим образом:
Значение Описание
inline-block

Элемент генерирует блок-бокс, который будет протекать с окружающим контентом, как если бы он был одним встроенным ящиком (ведя себя подобно замененному элементу) Это эквивалентно inline flow-root.

inline-table

Значение inline-table не имеет прямого отображения в HTML. Он ведет себя как элемент <table> HTML, но как встроенный блок, а не блок-уровень. Внутри таблицы есть контекст на уровне блока. Это эквивалентно inline table.

inline-flex

Элемент ведет себя как встроенный элемент и выдает его содержимое в соответствии с моделью flexbox. Это эквивалентно inline flex.

inline-grid Элемент ведет себя как встроенный элемент и выдает его содержимое в соответствии с моделью сетки.

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

[ <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 | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<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

Примеры


Посмотреть живые примеры

p.secret  { display: none }
<p style="display:none"> invisible text </p>

Характеристики

Специфика Статус Коммент
CSS Display Module Level 3
Определение 'display' в этой спецификации.
Рабочий черновик Добавлены значения run-in и contents .
CSS Ruby Layout Module Level 1
Определение 'display' в этой спецификации.
Рабочий черновик Добавлены ruby, ruby-base, ruby-text, ruby-base-container, и ruby-text-container
CSS Grid Layout
Определение 'display' в этой спецификации.
Кандидат в рекомендации Добавлены значения модели сетки.
CSS Flexible Box Layout Module
Определение 'display' в этой спецификации.
Кандидат в рекомендации Добавлены значения гибкой Flexbox.
CSS Level 2 (Revision 1)
Определение 'display' в этой спецификации.
Рекомендация Добавлены значения модели таблицы и inline-block.
CSS Level 1
Определение 'display' в этой спецификации.
Рекомендация Основные значения:  none, block, inline, и list-item.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline and block 1.0 1.0 (1.7 или ранее) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 [4] 7.0 1.0 (85)
list-item 1.0 1.0 (1.7 или ранее) 6.0 7.0 1.0 (85)
run-in 1.0 [5] Нет 8.0 7.0 1.0 (85) [5]

4.0

Removed in 32

5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption 1.0 1.0 (1.7 или ранее) 8.0 7.0 1.0 (85)
flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)
11 12.50 6.1-webkit
inline-flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)
11 12.50 6.1-webkit
grid ? Нет 10.0-ms ? ?
inline-grid ? Нет 10.0-ms ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? 34.0 (34.0) [3] ? ? ?
contents Нет 37 (37) [2] Нет Нет Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 ? ? ? 7.0-webkit

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

[2] In Firefox 36, it the preference governing this feature was off by default.

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

[4] Natural inline elements only

[5] Not before inline-elements

 

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

Метки документа и участники

Внесли вклад в эту страницу: warsan, baradusov, Sebastianz, Aleksej, teoli, racer1933
Обновлялась последний раз: warsan,