CSS display Свойство
Пример
Использование некоторых различных значений дисплея:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Подробнее примеры ниже.
Определение и использование
Свойство display
определяет поведение отображения (тип поля визуализации) элемента.
В HTML значение свойства Display по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию обозревателя/пользователя. Значение по умолчанию в XML — Inline, включая элементы SVG.
Значение по умолчанию: | ? |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.display="none" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Примечание: Значения "Flex" и "inline-Flex" требует-WebKit-префикс для работы в Safari.
Примечание: "Display: Contents" не работает в EDGE/Internet Explorer.
Синтаксис CSS
display: value;
Значения свойств
Значение | Описание | |
---|---|---|
inline | Отображает элемент как встроенный элемент (например, <span>). Любые свойства Height и Width не будут иметь эффекта | |
block | Отображает элемент как элемент блока (например, <p>). Он начинается на новой линии и занимает всю ширину | |
contents | Делает контейнер исчезают, делая дочерние элементы дочерних элементов элемента следующий уровень вверх в DOM | |
flex | Отображает элемент как контейнер 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) |
Другие примеры
Пример
Демонстрация использования значения свойства 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;
}
Пример
Демонстрация использования значения свойства наследуемого:
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 Свойство