Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство дисплея указывает тип окна, используемый для HTML-элемента.
| Значение по умолчанию: | inline |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object .style.display="none" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 Частичное от 5,5 | 3.0 | 3.1 | 7.0 |
Note: Значения "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" , и "table-row-group" не поддерживаются в IE7 и более ранних версий. IE8 требует! DOCTYPE. IE9 поддерживает значения.
Примечание: Значения "flex" и "inline-flex" требует префикса работать в Safari. Для "flex" использовать "display: -webkit-flex" для "inline-flex" использовать "display: -webkit-inline-flex;" ,
CSS Синтаксис
display:value;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| inline | Значение по умолчанию. Отображает элемент в качестве строкового элемента (like <span>) , (like <span>) | Сыграй " |
| block | Отображает элемент в качестве элемента блока (like <p>) , (like <p>) | Сыграй " |
| flex | Отображает элемент в качестве гибкого контейнера блочного уровня. Новое в CSS3 | |
| inline-block | Отображает элемент в качестве блока контейнера инлайн-уровня. Внутри этого блока отформатированы как поле на уровне блоков, а сам элемент форматируется как блок инлайн-уровня | |
| inline-flex | Отображает элемент в качестве гибкого контейнера инлайн-уровня. Новое в CSS3 | |
| 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 | Элемент не будет отображаться на всех (has no effect on layout) | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Демонстрация того, как использовать значение наследования имущества:
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 property