Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Свойство empty-cells в CSS Свойство direction в CSS

Метод использования и пример CSS display свойства

Свойство display CSS определяет тип рамки, создаваемой элементом.

Ниже приведено описание использования и истории версий этого свойства, а также грамматика использования в скриптах JavaScript.

Значение по умолчанию:	inline
Применяется к:	Все элементы
Инheritance:	Нет
Анимация возможна:	Нет.См. также Анимационные свойства.
Версия:	CSS 1, 2, 3
JavaScript грамматика:	object.style.display="block"

Инструкции по использованию

значение display может отличаться от корневого элемента иплавающиеилиЭлементы с абсолютной позиционировкойразные значения.
Если значение свойства 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	элемент создаетБлочныйрамка.
contents	элемент сам не создает никакой рамки, но егоэлементиПсевдоэлементгенерирует рамку и текст работает нормально.
flex	Элемент создает блоковый элементГибкий контейнер box.
flow	Элемент использует поток для макета содержимого (блочный и инлайн макет).
flow-root	Элемент создает блоковый контейнер и использует поток для макета содержимого.
grid	Этот элемент создает блоковый контейнер для сетки.
inline-block	Элемент создает блоковый контейнер, и его макет подобен嵌入式 контейнеру.
inline-flex	Элемент создает контейнер для адаптивного контейнера на уровне инлайна.
inline-grid	Элемент создает контейнер для сетки на уровне инлайна.
inline-table	Этот элемент ведет себя как таблица, так и инлайн-контейнер.
list-item	Элемент создает блоковый контейнер для содержимого и отдельный инлайн-контейнер для маркеров списка.
run-in	Этот элемент создает блок или инлайн-контейнер в зависимости от контекста.
table	Behavior of this element is similar to<table>Элемент HTML.
table-caption	Behavior of this element is similar to<caption>Элемент HTML.
table-column-group	Behavior of this element is similar to<colgroup>Элемент HTML.
table-header-group	Behavior of this element is similar to<thead>Элемент HTML.
table-footer-group	Behavior of this element is similar to<tfoot>Элемент HTML.
table-row-group	Behavior of this element is similar to<tbody>Элемент HTML.
table-cell	Behavior of this element is similar to<td>Элемент HTML.
table-column	Behavior of this element is similar to<col>Элемент HTML.
table-row	Behavior of this element is similar to<tr>Элемент HTML.
none	Закрыть отображение элемента. Даже если все свойства отображения подэлементов установлены в none, отображение элемента все равно будет закрыто.
initial	Установите этот атрибут в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства display родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойств display, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 1+ Google Chrome 1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

Предупреждение:Значения, такие как contents, flow-root, run-in и т.д., не поддерживаются во многих браузерах. Вы лучше временно избегайте их использования.

Для дальнейшего чтения

Узнайте больше из следующих учебников:CSS Display.

См. также следующие свойства:visibility,float,position.

Свойство empty-cells в CSS Свойство direction в CSS