Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

Свойство 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
  1. none - Временно скрывает элемент. Страница генерируется так, словно этого элемента не существует.
  2. block - Элемент отображается как блочный. Если мы его применим для элемента <span>, то он отобразится как блок.
  3. inline - Элемент показывается как строчный. Для элемента <div> будет отменен перенос строки до и после блока, т.е. элемент будет отображаться как строчный.
  4. inline-block - Внутренняя часть элемента формируется как блок, а внешняя, как строка. То есть элемент будет обтекаться другими элементами. Так работает элемент <img>.
  5. inline-table - Элемент становится таблицей и оптекается другими элементами.
  6. inline-flex - Строчный. Ведет себя согласно флекс-модели.
  7. flex - Блочный. Ведет себя согласно флекс-модели.
  8. list-item - Блочный. Добавляется маркер списка.
  9. run-in - Элемент становится блочным или строчным в зависимости от контекста.
  10. table - Элемент становится блочной таблицей.
  11. table-caption - Задает заголовок таблицы. Аналог <caption>.
  12. table-cell - Ячейка таблицы.
  13. table-column - Колонка таблицы.
  14. table-column-group - Группа колонок таблицы.
  15. table-footer-group - Футер таблицы.
  16. table-header-group - Шапка таблицы.
  17. table-row - Строка таблицы.
  18. table-row-group - Несколько строк таблицы.
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно