display
Использование некоторых различных отображаемых значений:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Попробуйте сами »
Определение display
CSS свойство display
определяет поведение отображения (тип окна рендеринга) элемента.
Значение по умолчанию: | inline |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS1 |
JavaScript синтаксис: | object.style.display="none" Попробуй |
Поддержка display
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Примечание: Для работы значений "flex" и "inline-flex" требуется префикс -webkit- для работы в Safari предыдущей версии 9.
Примечание: "display: contents" не работает в Edge предыдущей версии 79.
Синтаксис display
display: value;
Значения display
Значение | Описание | Демонстрация |
---|---|---|
inline | Отображает элемент как встроенный элемент (например, <span>). Любые свойства высоты и ширины не будут иметь никакого эффекта. Это значение по умолчанию. | Демо ❯ |
block | Отображает элемент в виде блочного элемента (например, <p>). Он начинается с новой строки и занимает всю ширину | Демо ❯ |
contents | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемента следующего уровня в DOM | Демо ❯ |
flex | Отображает элемент в виде гибкого контейнера блочного уровня | Демо ❯ |
grid | Отображает элемент в виде контейнера сетки на уровне блоков | Демо ❯ |
inline-block | Отображает элемент как блок-контейнер встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Демо ❯ |
inline-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 |
Примеры display
Демонстрация того, как использовать значение свойства contents. В следующем примере контейнер .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;
}
Попробуйте сами »
Демонстрация того, как использовать значение свойства inherit:
body {
display: inline;
}
p {
display: inherit;
}
Попробуйте сами »
Установить направление некоторых гибких элементов внутри элемента <div> в обратном порядке:
div {
display: flex;
flex-direction: row-reverse;
}
Попробуйте сами »
Страницы по теме display
CSS Учебник: CSS Отображение и видимость
HTML DOM справочник: display свойство