Это старая версия документа!
# CSS. Свойство display
Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display.
Тип отображения может влиять сразу на две вещи:
- на расположение самого бокса в потоке
- на расположение дочерних элементов внутри бокса.
То, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.
Рассмотрим четыре основных типа боксов:
- блочные, display: block,
- строчные, display: inline,
- блочно-строчные, display: inline-block,
- гибкие или флексовые (флексы), display: flex.
## display: block
Блочный бокс — это прямоугольная область на странице, просто прямоугольник. По умолчанию блочным боксом обладают крупные поточные элементы, которые не являются фразовыми. Например, элементами с блочными боксами по умолчанию являются: <div>, <header>, <footer>, <section>, <h1>…<h6>, <p>, <ul>, <ol>, <li>.
Особенности блочных боксов:
- До и после блочного бокса есть принудительный перенос строки. На одной строке с таким боксом не может находиться никакой другой элемент. Даже если блочный бокс почти не содержит контента или занимает лишь маленькую часть строки — он всё равно на строке один.
- На блочные боксы действуют все свойства блочной модели (width, height, margin, padding).
- Блочный бокс по умолчанию тянется на всю ширину родительского элемента.
- По высоте блочный бокс ужимается под содержимое.
## display: inline
Строчный бокс — это фрагмент текста, который может разрываться и находиться на нескольких строках.
Элементы, боксы которых по умолчанию являются строчными, это теги, с помощью которых размечают небольшие куски текста, словосочетания: <a>, <span>, <button>, <strong>, <em>, <i>, <b>, <time>.
Отличия строчных и блочных боксов:
У строчных боксов несколько отличий от блочных:
- Строчные боксы ведут себя как текст, то есть могут располагаться и на одной строке, и на нескольких. Если такой бокс не помещается на одной строке, то он переносится на следующую.
- Строчные боксы плохо взаимодействуют со свойствами блочной модели. Некоторые свойства на них просто не действуют, а некоторые — действуют частично. Например, отступы в строчных боксах работают только в горизонтальном направлении.
- Размеры строчных боксов всегда зависят от содержания.
## display: inline-block
Блочно-строчные боксы сочетают в себе особенности и блочных боксов, и строчных боксов. Этот тип боксов используется для стилизации мелких интерфейсных элементов и элементов текстового содержания.
## display: flex
Флексы — основной инструмент построения крупных сеток и микросеток.
Особенности, которые следует помнить и учитывать:
- Все блоки - «резиновые», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
- Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
- Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
- Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
- Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). В браузерах с локалью rtl все элементы будут автоматически расположены в обратном порядке.
Подробно синтаксис CSS-правил для flex смотри здесь.