147. Свойство display
Свойство display
применяется часто и нужно оно для определения того, как будет показан элемент в документе. Далее его синтаксис:
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
- Несколько строк таблицы.
Похожие уроки и записи блога
- Скройте заголовок
h1
при помощи свойстваdisplay
.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.