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>