kwork banner 468x60kwork banner 728x90kwork banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

CSS-свойство display

CSS-свойство display указывает тип элемента. Каждый тип устанавливает некие правила для взаимодействия с другими элементами и своего содержимого.

Значение по умолчанию: inline
Применяется к: Все элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: CSS 1, 2, 3
  • Если значение display не указано явно, для абсолютно-позиционированных и floated элементов оно вычисляется самостоятельно.
  • Если для свойства display установлено значение none — элемент вообще не создает никаких блоков и не влияет на макет; элемент и его содержимое полностью удаляются из структуры и документ отображается так, будто бы элемент никогда не существовал в дереве документа.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit

Примеры написания кода свойства display:

div {
    display: inline;
}
span {
    display: block;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
inline Устанавливает свойства строчного элемента.
block The element generates a блочного элемента.
contents Для самого элемента не устанавливается специфических свойств, но для потомков и псевдо-элементы устанавливаются поля (boxes) и текст работает как обычно.
flex Устанавливает свойства flex-содержимого для элемента.
flow Элемент устанавливает свое содержимое, используя макет потока (линейно-блочный макет).
flow-root Элемент генерирует блок-контейнер box, и выкладывает его содержимое, используя макет потока.
grid Устанавливает свойства grid-сетки для элемента.
inline-block Устанавливает свойства блочного элемента, который обтекается другими элементами подобно встроенному элементу.
inline-flex Устанавливает свойства flex-содержимого для элемента, но он обтекается другими элементами подобно встроенному элементу.
inline-grid Устанавливает свойства grid-сетки для элемента, но он обтекается другими элементами подобно встроенному элементу.
inline-table Устанавливает свойства тега table для элемента, но он обтекается другими элементами подобно встроенному элементу.
list-item Устанавливает свойства блочного элемента и добавляется маркер списка.
run-in Элемент ведет себя как блочный или строчный в зависимости от контекста.
table Элемент ведет себя как <table>
table-caption Элемент ведет себя как <caption>
table-column-group Элемент ведет себя как<colgroup>
table-header-group Элемент ведет себя как <thead>
table-footer-group Элемент ведет себя как <tfoot>
table-row-group Элемент ведет себя как <tbody>
table-cell Элемент ведет себя как <td>
table-column Элемент ведет себя как <col>
table-row Элемент ведет себя как <tr>
none Отключить отображение элемента. У всех дочерних элементов также отключено отображение, даже если их свойство display установлено не none.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента display.

Поддержка браузеров

Свойство display поддерживается во всех основных браузерах.

  • Такие значения, как contents, flow-root, run-in и т. д., плохо поддерживаются в большинстве браузеров. Вы должны стараться избегать их использования в настоящее время.
  • Вообще, список возможных значений этого свойства которые поддерживаются всем браузерами очень короткий — block, inline, list-item и none. Все остальные значения поддерживаются браузерами выборочно.
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

CSS-свойство clip

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