CSS стиль display

CSS стиль display определяет, как элемент должен быть показан в web-странице.

Настольные Мобильные

Chrome 32 - значение run-in больше не поддерживается.

Краткая информация по CSS-свойству display

Значение по умолчанию	`inline`
Наследуется	Нет
Применяется	Ко всем элементам

Правила написания свойства display

display: block | flex | inline | inline-block | 
inline-table | list-item | none | run-in | 
table | table-caption | table-cell | 
table-column-group | table-column | 
table-footer-group | table-header-group | 
table-row | table-row-group

block - элемент показывается как блочный. Применение этого значения для строчного элемента, например <span>, заставляет элемент вести сябя подобно блочному элементу, т.е. происходит перенос строк в начале и в конце содержимого.

inline - элемент отображается как строчный. Блочные элементы (например, <div> и <p>) автоматически создают перенос и показывают свое содержимое на новой строке. Свойство display: inline заставляет содержимое блочных элементов начинаться с того места, где окончился предыдущий элемент.

inline-block - элемент ведет себя как блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу, т.е. фактически ведет себя как встраиваемые элементы (например, <img>). При этом сам элемент форматируется как строчный элемент, а его внутренняя часть - как блочный.

inline-table - в этом случае элемент является таблицей как и при использовании тега <table>, но при этом таблица будет вести себя как строчный элемент и будет обтекаться другими элементами (текстом и пр.).

list-item - элемент становится блочным и с маркером списка.

none - скрывает элемент на web-странице. Занимаемое им место не резервируется и страница отображается так, словно этого элемента никогда не было. Сделать элемент видимым элемент можно обратившись к его свойству с помощью скрипта, например Объект.style.display = "block".

run-in - элемент будет блочным или строчным в зависимости от контекста.

table - элемент является блочной таблицей подобно использованию <table>.

table-caption - задает заголовок таблицы, аналогично тегу <caption>.

table-cell - значение указывает, что элемент представляет собой ячейку таблицы (<th> или <dd>).

table-column - назначает элемент колонкой таблицы, словно был добавлен тег <col>.

table-column-group - определяет, что элемент представляет собой группу из одной или более колонок таблицы, как при использовании тега <colgroup>.

table-footer-group - используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию напоминает тег <tfoot>.

table-header-group - элемент предназначен для хранения одной или нескольких строк ячеек, расположенных вверху таблицы. По своему действию напоминает тег <thead>.

table-row - отображает элемент как строку таблицы (<tr>).

table-row-group - создает блок, состоящий из нескольких строк таблицы аналогично тегу <tbody>

Объектная модель

Объект.style.display

Пример применения стиля display

Проиллюстрируем работу display на примере. Спрячем элемент с помощью CSS, а после покажем с помощью скрипта.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля display</title>
<style>
div {
    background: red;
    display: none;
    padding: 3px;
}
</style>
</head>
<body>
  <div id="dn">Скрытый блок</div>
  <script>
    var el = document.getElementById("dn");
        el.style.display="inline-block";
  </script>
</body>
</html>

Применение свойства display