CSS-свойство display
Описание: Определяет, как элемент визуально отображается на странице и как он участвует в потоке документа. Свойство влияет на поведение элемента в отношении размещения, размеров и взаимодействия с другими элементами.
Значения:
- block
- inline
- inline-block
- none
- flex
- grid
- inline-flex
- inline-grid
- table
- table-row
- table-cell
- list-item
- contents
- inherit
- initial
- unset
Начальное значение: Зависит от типа элемента (обычно inline для строчных и block для блочных элементов)
Применяется к: все элементы
Наследуется: Нет
Медиа-тип: visual
Пример использования
div {
display: flex;
}Доступность (a11y)
display: none;Элементы с этим значением полностью скрыты как визуально, так и для пользователей вспомогательных технологий. Используйте с осторожностью, чтобы не скрыть важный контент.display: contents;Элемент визуально исчезает, но его дочерние элементы остаются в потоке документа. Это может нарушить семантику и навигацию для пользователей вспомогательных технологий, поэтому необходимо убедиться, что структура остаётся понятной.- Изменение
displayу семантических элементов (например, изменение<table>наdisplay: block;) может привести к потере семантической информации, что затруднит понимание структуры страницы вспомогательными технологиями. - Использование
display: flex;илиdisplay: grid;может улучшить адаптивность и порядок элементов на странице, что положительно влияет на навигацию и восприятие пользователями с ограниченными возможностями.