Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

147. Свойство 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 - Несколько строк таблицы.

Похожие уроки и записи блога

Общая информация и форматирование таблицВерстка таблиц
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Свойство background для работы с фономЦвета и фон
Управляющие последовательности в JavaScriptТипы и переменные
Первое знакомство с PythonЗнакомство с Python
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Единицы измерения длины в CSSЕдиницы измерения
Свойство z-index для определения уровня элементаПозиционирование
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно