СSS Свойство display
Пример
Использовать некоторых различных значений отображения:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Попробуйте сами »
Определение и использование
Свойство display определяет поведение отображения (тип поля визуализации) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификации HTML или из таблицы стилей браузера/пользователя по умолчанию. Значение по умолчанию в XML находится в строке, включая элементы SVG.
| Значение по умолчанию: | ? |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.display="none" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Примечание: Значения "flex" и "flex", "inline-flex" и "inline-flex" требует префикс -webkit- для работы с браузером Safari.
Примечание: "display: contents" не работает в Edge/Internet Explorer.
CSS Синтаксис
display: value;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| inline | Отображает элемент как встроенный элемент (например, <span>). Любые свойства высоты и ширины не будут иметь никакого эффекта | Воспроизвести » |
| block | Отображает элемент в виде блочного элемента (например, <p>). Он начинается на новой линии и занимает всю ширину | Воспроизвести » |
| contents | Делает контейнер исчезнуть, создание дочерних элементов элемента на следующий уровень вверх в DOM | Воспроизвести » |
| flex | Отображает элемент в виде контейнера flex уровня блока | Воспроизвести » |
| grid | Отображение элемента в виде контейнера сетки уровня блока | Воспроизвести » |
| inline-block | Отображает элемент в виде контейнера блоков встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Воспроизвести » |
| inline-flex | Отображает элемент в виде контейнера flex встроенного уровня | Воспроизвести » |
| inline-grid | Отображает элемент в виде контейнера сетки встроенного уровня | Воспроизвести » |
| inline-table | Элемент отображается в виде таблицы встроенного уровня | Воспроизвести » |
| list-item | Пусть элемент ведет себя как элемент <li> | Воспроизвести » |
| 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 | Элемент полностью удален | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Демонстрация того, как использовать содержание свойства знчений. В следующем примере контейнер (.a) исчезнет, и создадутся дочерние элементы (.b) дочерние элементы элемента на следующем уровне вверх в DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Попробуйте сами »
Пример
Демонстрация того, как использовать наследование значения свойства :
body {
display: inline;
}
p {
display: inherit;
}
Попробуйте сами »
Пример
Установить направление некоторых гибких элементов внутри элемента <div> в обратном порядке:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Дисплей и видимость
HTML DOM Справочник: Свойство display
