Display block в CSS: полный справочник по свойству отображения элементов

CSS-свойство display – краеугольный камень верстки. От того, каким образом элемент отображается, зависит вся структура страницы. Давайте разберемся с блоками и строчными элементами, изучим все тонкости работы display и применим это знание в реальных проектах.

Блочная модель и строчная разметка

Как браузер отображает HTML-элементы: блоки и строки. Внешние и внутренние отличия, преимущества и недостатки.

• Блочные элементы формируют прямоугольные блоки контента, которые занимают всю доступную ширину родительского контейнера.
• Строчные элементы располагаются в строку и занимают столько места, сколько нужно для отображения контента.

Вопрос: Как вы думаете, зачем нужны два режима отображения?

Display: block – самый важный режим

Формирует блочную модель страницы. Занимает всю доступную ширину. Отступы, рамки и фоны.

1. Создает "кирпичики" для построения макета сайта.
2. Позволяет задать ширину блока в процентах или пикселях.
3. Внутри блоков можно разместить другие элементы.
4. Между соседними блоками всегда перенос строки.

Совет: Используйте block для структурных элементов.

Display: inline – строка за строкой

Размещение элементов в одну линию. Перенос на несколько строк при нехватке места. Вертикальные отступы не работают.

Пример горизонтального меню с display: inline.

• Инлайновые элементы не имеют собственных размеров.
• Хороши для оформления текста: выделение, шрифты.
• Плохо подходят для компоновки макета.

Отображение inline-block

Свойства блока в строке. Ширина, высота, вертикальное выравнивание. Пробелы между элементами.

Особенности и нюансы применения

Баги старых браузеров. Неочевидные моменты отображения элементов.

5 рекомендаций по использованию display:

1. Проверить в старых браузерах
2. Добавить префиксы
3. Использовать фоллбеки
4. Тестировать на разных устройствах
5. Следить за актуальными спецификациями

 .hide { display: none; } 

Призыв к действию: Попробуйте разные режимы отображения в своих проектах и поделитесь результатами в комментариях!

Применение display: block

CSS display block используется для создания блочной структуры сайта.

3 примера использования display: block:

1. Контейнеры и секции
2. Шапка, подвал, боковая панель сайта
3. Большие изображения и галереи

Преимущества 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) элементы. Они вынимаются из общего потока и размещаются слева или справа, обтекание контентом настраивается автоматически.

Часто используется для блочных изображений и других вставок внутри текста.

Верстка модальных окон

Модальные окна часто используются для отображения дополнительной информации поверх контента страницы. Они могут содержать формы, изображения, видео.

Для верстки модального окна нужно:

1. Скрыть изначально display: none
2. При открытии переключить на display: block
3. Затемнить фон сайта под модальным окном

 .modal { display: none; position: fixed; top: 10%; width: 60%; padding: 20px; background: #fff; } .open-modal { display: block; } 

Верстка аккордеона

Аккордеон представляет собой элемент, который раскрывается и показывает скрытое содержимое.

Чтобы развернуть содержимое, нужно при клике:

1. Найти вложенный блок
2. Изменить display: none на display: block

 $('.accordion-btn').click(function() { $(this).next().slideToggle(); }) 

Выпадающие меню

Выпадающие меню реализуются с помощью вложенных списков ul-li, где подменю скрыто изначально display: none.

После наведения на пункт меню, подменю переключается в display: block.