CSS-свойство display – краеугольный камень верстки. От того, каким образом элемент отображается, зависит вся структура страницы. Давайте разберемся с блоками и строчными элементами, изучим все тонкости работы display и применим это знание в реальных проектах.
Блочная модель и строчная разметка
Как браузер отображает HTML-элементы: блоки и строки. Внешние и внутренние отличия, преимущества и недостатки.
- Блочные элементы формируют прямоугольные блоки контента, которые занимают всю доступную ширину родительского контейнера.
- Строчные элементы располагаются в строку и занимают столько места, сколько нужно для отображения контента.
Вопрос: Как вы думаете, зачем нужны два режима отображения?
Display: block – самый важный режим
Формирует блочную модель страницы. Занимает всю доступную ширину. Отступы, рамки и фоны.
- Создает "кирпичики" для построения макета сайта.
- Позволяет задать ширину блока в процентах или пикселях.
- Внутри блоков можно разместить другие элементы.
- Между соседними блоками всегда перенос строки.
Совет: Используйте block для структурных элементов.
Display: inline – строка за строкой
Размещение элементов в одну линию. Перенос на несколько строк при нехватке места. Вертикальные отступы не работают.
Пример горизонтального меню с display: inline.
- Инлайновые элементы не имеют собственных размеров.
- Хороши для оформления текста: выделение, шрифты.
- Плохо подходят для компоновки макета.
Отображение inline-block
Свойства блока в строке. Ширина, высота, вертикальное выравнивание. Пробелы между элементами.
| inline | inline-block |
| Текстовый режим | Гибридный режим |
| Нет размеров | Можно задать размеры |
Особенности и нюансы применения
Баги старых браузеров. Неочевидные моменты отображения элементов.
5 рекомендаций по использованию display:
- Проверить в старых браузерах
- Добавить префиксы
- Использовать фоллбеки
- Тестировать на разных устройствах
- Следить за актуальными спецификациями
.hide { display: none; } Призыв к действию: Попробуйте разные режимы отображения в своих проектах и поделитесь результатами в комментариях!
Применение display: block
CSS display block используется для создания блочной структуры сайта.
3 примера использования display: block:
- Контейнеры и секции
- Шапка, подвал, боковая панель сайта
- Большие изображения и галереи
Преимущества block:
- Занимает всю доступную ширину
- Можно задать размеры в пикселях или процентах
Инлайн-блок в действии
Инлайн-блок соединяет свойства блочных и строковых элементов.
Пример горизонтального меню на CSS display inline-block:
.menu li { display: inline-block; padding: 10px; } Другое применение - адаптивные карточки товаров, которые перестраиваются в зависимости от ширины экрана.
Скрытие элементов
Для скрытия элементов используется значение display: none или видимость visibility: hidden.
Отличия методов:
- None полностью удаляет элемент из документа
- Hidden оставляет место, элемент невидим
Пример скрытия кнопки jQuery:
$('.btn').css('display', 'none'); Наследование display
Свойство display не наследуется дочерними элементами.
Например, для выпадающего меню нужно явно указать display: block для подменю.
.sub-menu { display: block; } Иначе подменю унаследует display родителя и не отобразится как блок.
Дополнительные возможности display block
Рассмотрим полезные возможности CSS-свойства display: block.
- Создание многострочного текста
Благодаря ширине в 100% блок-элементы идеально подходят для размещения многострочного текстового контента. Например, статьи на сайте, блоги или описания товаров в интернет-магазинах.
- Фоновое изображение или градиент
Для блока можно задать фон в виде цвета, изображения или градиента. Это удобно использовать в шапке, секциях сайта или баннерах.
- Обтекание плавающими элементами
В блоковых элементах с ими работает правильно обтекание плавающими изображениями или текстом.
Особенности inline-block
Inline-block накладывает ограничение на перенос строки - перенос может произойти только между элементами, а не внутри них. Поэтому внутренний контент в инлайн-блоке ведет себя как обычный блок.
Чтобы избежать нежелательных пробелов между инлайн-блоками, можно:
- Снять перенос строки
- Обнулить отступы
- Использовать font-size: 0
Переключение display с помощью CSS и jQuery
Из JavaScript возможно манипулировать CSS-свойством display элемента и скрывать или отображать его.
Например, переключать отображение блока по клику:
$('.block').click(function() { $(this).css('display', 'none'); }); Блочная верстка макета сайта
Блоки являются основой для верстки макета любого сайта, будь то одностраничный сайт-визитка, корпоративный портал или интернет-магазин.
Структура сайта обычно состоит из header, content, sidebar, footer. Все эти элементы имеют display: block.
- Header - шапка сайта
- Content - основное содержимое
- Sidebar - боковая панель, меню
- Footer - подвал сайта
Также на странице могут использоваться дополнительные блоки - герой, секции, блоки с контентом.
Адаптивная верстка с помощью flexbox
Для создания адаптивной верстки, когда контент перестраивается на разных устройствах, удобно использовать Flexbox.
Гибкая компоновка блоков достигается установкой display: flex для родительского контейнера.
.content { display: flex; flex-wrap: wrap; } При этом элементы внутри контента будут автоматически перестраиваться на мобильных устройствах и планшетах.
Плавающие блоки в верстке
Еще одна возможность позиционирования в CSS - это плавающие (float) элементы. Они вынимаются из общего потока и размещаются слева или справа, обтекание контентом настраивается автоматически.
Часто используется для блочных изображений и других вставок внутри текста.
Верстка модальных окон
Модальные окна часто используются для отображения дополнительной информации поверх контента страницы. Они могут содержать формы, изображения, видео.
Для верстки модального окна нужно:
- Скрыть изначально display: none
- При открытии переключить на display: block
- Затемнить фон сайта под модальным окном
.modal { display: none; position: fixed; top: 10%; width: 60%; padding: 20px; background: #fff; } .open-modal { display: block; } Верстка аккордеона
Аккордеон представляет собой элемент, который раскрывается и показывает скрытое содержимое.
Чтобы развернуть содержимое, нужно при клике:
- Найти вложенный блок
- Изменить display: none на display: block
$('.accordion-btn').click(function() { $(this).next().slideToggle(); }) Выпадающие меню
Выпадающие меню реализуются с помощью вложенных списков ul-li, где подменю скрыто изначально display: none.
После наведения на пункт меню, подменю переключается в display: block.
