display

Резюме

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

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

Обзор

/* <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-outside>
• <display-inside>
• <display-listitem>
• <display-internal>
• <display-box>
• <display-legacy>

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

Значения

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>

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

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

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!

[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

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

• visibility, float, position
• flex