Главная > Статьи > Полный список значений CSS-свойства display с описанием

Полный список значений CSS-свойства display с описанием

10006

css-display-values

При верстке страниц сайта часто существует потребность изменить стиль отображения элемента, для этого в CSS есть свойство display. Оно позволяет превратить строчный элемент в блочный и наоборот, это может пригодиться в разных ситуациях. Кроме того, свойство можно использовать для удаления элемента из страницы или придания элементу других различных свойств. Ниже будет приведен полный список значений свойства display, которые можно использовать для управления стилем показа элемента на странице.

В начале стоит сказать, что все значения сгруппированы по нескольким категориям:

глобальные значения – группа содержит общие значения;
display-outside – значения из этой группы определяют внешний тип отображения элемента;
display-inside - значения определяют внутренний тип отображения элемента;
display-listitem - значения показывают элемент в виде списка;
display-internal – группа содержит внутренние значения, которые можно применять к элементам;
display-box - группа содержит общие значения, которые можно применять к элементам;
display-legacy – значения из этой группы содержат в себе сразу несколько разных значений.

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

Группа глобальных значений:

inherit – наследовать родительское значение;

initial - применяется для установки исходного значения свойства;

unset - является комбинацией ключевых слов initial и inherit.

Группа display-outside имеет следующие значения:

block – делает элемент блочным;

inline – делает элемент строчным;

run-in – делает элемент блочным или строчным в зависимости от контекста.

Группа display-inside имеет следующие значения:

flow – элемент выводит его содержимое с помощью компоновки потока;

flow-root - элемент выводит его содержимое с помощью компоновки корневого потока;

table – превращает элемент в таблицу;

flex - элемент ведет себя как элемент блока и выдаёт свое содержимое гибким образом;

grid - элемент ведет себя как элемент блока и выдаёт содержимое в виде сетки;

ruby - предназначен для добавления небольшой аннотации сверху или снизу от заданного текста, аналогично тегу ruby;

subgrid - если родительский элемент имеет значение grid, сам элемент и его содержимое показываются в виде сетки.

Группа display-listitem имеет главное значение list-item, остальные значения являются возможными комбинациями других значений:

list-item – делает элемент блочным и добавляет маркеры списка;

list-item block;

list-item inline;

list-item flow;

list-item flow-root;

list-item block flow;

list-item block flow-root;

flow list-item block.

Группа display-internal имеет следующие значения:

table-row-group - делает структурный блок, который состоит из нескольких строк таблицы, работает аналогично тегу tbody;

table-header-group – делает элемент контейнером для хранения одной или нескольких строк ячеек, представленных вверху таблицы, аналогично тегу thead;

table-footer-group - применяется для хранения одной или нескольких строк ячеек, отображаемых в самом низу таблицы, аналогично тегу tfoot;

table-row – делает элемент строкой таблицы, аналогично использованию тега tr;

table-cell – отображает элемент как ячейку таблицы;

table-column-group – делает элемент группой одной или более колонок таблицы, аналогично тегу colgroup;

table-column - делает элемент колонкой таблицы, аналогично тегу col;

table-caption – устанавливает заголовок для таблицы, аналогично тегу 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.

Также существуют значения, входящие сразу в две группы - display-outside и display-inside:

block flow;

inline table;

flex run-in.

Как видно значений очень много, часть из них совсем новые. Очень часто используются значения none и block. Например, при помощи JavaScript можно управлять показом элемента - скрывать его или показывать при помощи этих двух значений. Также можно заметить частое использование значения table-cell для блоков, оно применяется для того, чтобы сделать вертикальное выравнивание в div при помощи другого свойства - vertical-align: middle. Важно понимать, что браузеры могут поддерживать не все значения свойства display. Наиболее поддерживаемые браузерами значения: block, inline, list-item, none. Поэтому прежде чем использовать данное свойство и выбранное значение, стоит протестировать работу значения во всех популярных браузерах.