Галерея

Зачем нужно свойство display в CSS

Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display .

Тип отображения может влиять сразу на две вещи: на расположение самого бокса в потоке и на расположение дочерних элементов внутри бокса.

Тот факт, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.

Рассмотрим четыре основных типа боксов:

• блочные, display: block ,
• строчные, display: inline ,
• блочно-строчные, display: inline-block ,
• гибкие или флексовые (флексы), display: flex .

Блочный бокс

Особенности блочных боксов

До и после блочного бокса есть принудительный перенос строки. На одной строке с таким боксом не может находиться никакой другой элемент. Даже если блочный бокс почти не содержит контента или занимает лишь маленькую часть строки — он всё равно на строке один.

На блочные боксы действуют все свойства блочной модели ( width , height , margin , padding ).

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

По высоте блочный бокс ужимается под содержимое.

Пример поведения

Внутри есть четыре тега, и все эти теги являются блочными.

Хорошо видно, что строки текста внутри очень короткие, и можно было бы эти элементы ужать под текст. Но заголовки тянутся на всю ширину и занимают всю доступную в родителе ширину, за исключением внутренних отступов.

Также очевидно, что если бы заголовки ужались под контент, то они поместились бы на одну строку. Но каждый занимает отдельную строку.

Строчный бокс

Строчный бокс — это фрагмент текста, который может разрываться и находиться на нескольких строках.

Элементы, боксы которых по умолчанию являются строчными, это теги, с помощью которых размечают небольшие куски текста, словосочетания: , , , , , , , .

Отличия строчных и блочных боксов

У строчных боксов несколько отличий от блочных:

• Строчные боксы ведут себя как текст, то есть могут располагаться и на одной строке, и на нескольких. Если такой бокс не помещается на одной строке, то он спокойно переносится на следующую.
• Строчные боксы плохо взаимодействуют со свойствами блочной модели. Некоторые свойства на них просто не действуют, а некоторые — действуют частично. Например, отступы в строчных боксах работают только в горизонтальном направлении.
• Размеры строчных боксов всегда зависят от содержания.

Пример поведения

Посмотрите, как ведёт себя строчный бокс, если он не помещается в строке.

Строчные боксы — это не только теги и , но и обычный текст, который не обёрнут во фразовый тег. Такие фрагменты текста оборачиваются в анонимный строчный бокс. Анонимных боксов в рассмотренном примере три (это участки между явными строчными боксами, которые принадлежат тегам).

Блочный бокс — это прямоугольный статичный «кирпич», а строчный бокс — это что-то гибкое и текучее внутри этого «кирпича».

Блочно-строчный бокс

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

Флексбокс

Флексы — основной инструмент построения крупных сеток и микросеток.

Есть несколько особенностей, которые следует помнить и учитывать при использовании флексов:

• Все блоки очень легко делаются «резиновыми», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
• Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
• Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
• Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
• Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Флекс адаптирован для этого. В нем есть «начало» и «конец», а не «право» и «лево». В браузерах с локалью rtl все элементы будут автоматически расположены в обратном порядке.
• Синтаксис CSS-правил очень прост и осваивается довольно быстро.

При этом есть вещи, которые не стоит забывать при использовании флексбокса:

• Не используйте флексы там, где в этом нет необходимости.
• Разберитесь с флексбоксом и знайте его основы. Так намного легче достичь желаемого результата. К примеру, по умолчанию флекс-элементы вытягиваются по поперечной оси и установленное значение высоты для элемента никак не учитывается.
• Не забывайте про margin . Они учитываются при установке выравнивания по осям. Важно помнить, что margin во флексбоксе не «схлопываются», как это происходит в обычном потоке.
• Значение float у флекс-блоков не учитывается и не имеет значения.

Еще о флексбоксах

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Строчно-блочные элементы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Если для формирования секций использовать блочный элемент, то он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задавать размеры всей секции. Одним из решений является применение строчно-блочных элементов, которые сочетают преимущества строчных и блочных элементов.

Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block .

Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: , , , .

Характеристики этих элементов следующие.

• Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Размеры содержимого можно устанавливать через свойства width и height .
• Ширина блока получается сложением значений width , margin , border и padding .
• Высота блока получается сложением значений height , margin , border и padding .
• Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
• Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
• Перенос текста считается за пробел.

Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block , а внутрь элемента добавить изображение и подпись к нему через (пример 1).

Пример 1. Создание галереи

Обратите внимание, что высота секций различается, поскольку в стилях высота никак не ограничена, в отличие от ширины. Выравнивание секций можно установить через свойство vertical-align , в данном примере выравнивание делается по верхнему краю с помощью значения top .

Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).

Пример 2. Макет из трёх колонок

Колонки создаём с помощью элементов и в стилях для каждой колонки устанавливаем свойство display со значением inline-block , а также задаём выравнивание по верхнему краю через vertical-align . Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box . После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.

Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.

Рис. 2. Перенос колонки на другую строку

Это связано с особенностью строчных элементов, что перенос текста в коде воспринимается как пробел. Соответственно, этот пробел и виден между колонок, он же и оказывает влияние на общую ширину макета, что и приводит к переносу последней колонки на новую строку. Ей просто не хватает места.

Способов борьбы с этой особенностью несколько, они связаны как с редактирование кода HTML, так и воздействием через CSS. В HTML всё сводится к тому, чтобы не стало пробелов между закрывающим и открывающим тегами. Перечислим некоторые популярные методы.

Перенос атрибутов в на другую строку.

В HTML допустимо переносить закрывающую угловую скобку.

Использование комментариев в HTML.

Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.

В CSS тоже есть несколько методов.

Отрицательный margin-right или margin-left . Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.

Нулевой размер шрифта. Для родительского элемента ставим нулевое значение font-size , а затем для возвращаем его в желаемое значение.

После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).

Рис. 3. Макет из трёх колонок

Источник