display — CSS | MDN

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

Свойство 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 контейнер следующим образом:

.container {
    display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

.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
  • 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

Last modified:

10 окт. 2022 г., by MDN contributors

css — Способы анимации «display: none» без JS

Задать вопрос

Вопрос задан

Изменён 2 года 8 месяцев назад

Просмотрен 6k раз

Сделаю минимальный пример:

input, div {
  display: none;
}

label:before {
  content: 'Показать';
}

#toggle:checked + label:before {
  content: 'Скрыть';
}

#toggle:checked ~ div {
  display: block;
}
<input type="checkbox" name="toggle" />
<label for="toggle"></label>

<div>Скрытый контент</div>

Вопрос именно про display: none, поэтому способы прозрачности и нулевой высоты взамен данного свойства не предлагать. Анимация конечно же может содержать в себе opacity, height, width, transform и прочие стили. При помощи JS, особенно с помощью jQuery, это тоже без труда реализуется, но, вопрос именно по CSS.

Если таковых нет, поделитесь, что используете и почему? Например, при сокрытии и отображении подробной информаци или обрезки текста.

  • css
  • css3

8

«Вопрос в том, как сделать плавность появления, когда у элемента есть переключение с display: none на display: block.» Пример с display: none на display: block с методом keyframes:

input {
  display: none;
}

label:before {
  content: 'Показать';
}

#toggle:checked + label:before {
  content: 'Скрыть';
}

#toggle:checked ~ div {
  animation-name: open;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
#toggle:not(:checked) ~ div {
  display: none;
}
@keyframes open {
  0% {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
<input type="checkbox" name="toggle" />
<label for="toggle"></label>

<div>Скрытый контент</div>

PS: лично я использую метод toggle на JS/jQuery — добавление/удаление дополнительного класса и комбинирую его с CSS так как хочу. Если на чистом CSS, то данный пример. В остальном зависит от идеи, конкретики того, что и как нужно, метод реализации — уже второй вопрос.

10

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Макет CSS — свойство отображения

❮ Предыдущий Далее ❯


Свойство display является наиболее важным свойством CSS для управления макетом.


Свойство отображения

Свойство отображения определяет, отображается ли элемент и каким образом.

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

Нажмите, чтобы показать панель

Эта панель содержит элемент

, который по умолчанию скрыт ( display: none ).

Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).


Элементы уровня блока

Элемент уровня блока всегда начинается с новой строки и занимает доступна полная ширина (тянется влево и вправо, насколько это возможно).

Элемент

является элементом блочного уровня.

Примеры блочных элементов:

  • <р>
  • <форма>
  • <заголовок>
  • <нижний колонтитул>
  • <раздел>

Встроенные элементы

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

Это встроенный элемент внутри абзаца.

Примеры встроенных элементов:

  • <диапазон>
  • <а>
  • <изображение>

Дисплей: нет;

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

Элемент