133. Свойство display

Свойство display применяется часто и нужно оно для определения того, как будет показан элемент в документе. Далее его синтаксис:

Код CSS

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

none - Временно скрывает элемент. Страница генерируется так, словно этого элемента не существует.
block - Элемент отображается как блочный. Если мы его применим для элемента <span>, то он отобразится как блок.
inline - Элемент показывается как строчный. Для элемента <div> будет отменен перенос строки до и после блока, т.е. элемент будет отображаться как строчный.
inline-block - Внутренняя часть элемента формируется как блок, а внешняя, как строка. То есть элемент будет обтекаться другими элементами. Так работает элемент <img>.
inline-table - Элемент становится таблицей и обтекается другими элементами.
inline-flex - Строчный. Ведет себя согласно флекс-модели.
flex - Блочный. Ведет себя согласно флекс-модели.
list-item - Блочный. Добавляется маркер списка.
run-in - Элемент становится блочным или строчным в зависимости от контекста.
table - Элемент становится блочной таблицей.
table-caption - Задает заголовок таблицы. Аналог <caption>.
table-cell - Ячейка таблицы.
table-column - Колонка таблицы.
table-column-group - Группа колонок таблицы.
table-footer-group - Футер таблицы.
table-header-group - Шапка таблицы.
table-row - Строка таблицы.
table-row-group - Несколько строк таблицы.

133. Свойство display

Похожие уроки Codebra