Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
Табл. 1. Поддержка браузерами значений display
Значение
Описание
IE6
IE7
IE8
Cr2
Cr8
Op9.2
Op10
Sa3.1
Sa5
Fx3
Fx4
block
Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как встроенный. Использование блочных тегов, таких как и
, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table
Определяет, что элемент является таблицей как при использовании тега
, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table
Определяет, что элемент является блочной таблицей подобно использованию тега
.
table-caption
Задает заголовок таблицы подобно применению тега .
table-cell
Указывает, что элемент представляет собой ячейку таблицы (тег
или
).
table-column
Назначает элемент колонкой таблицы, словно был добавлен тег .
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега .
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега .
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега .
table-row
Элемент отображается как строка таблицы (тег
).
table-row-group
Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега .
поддержка значений table-footer-group и table-header-group происходит только для тегов и ;
для элементов
понимает значение block как list-item ;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
значение table-column применяется только для тега ;
значение table-column-group поддерживается только для тега .
Chrome 2.0, а также Safari версии 3 и старше, iOS:
значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline .
Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
Каждому 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 у флекс-блоков не учитывается и не имеет значения.
Еще о флексбоксах
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
html>head>metacharset="utf-8"/>title>displaytitle>style>.exampleborder:dashed1px#634f36;/* Параметры рамки */background:#fffff5;/* Цвет фона */font-family:'Courier New',Courier,monospace;/* Шрифт текста */padding:7px;/* Поля вокруг текста */margin:001em;/* Отступы */>.exampleTitleborder:1pxsolidblack;/* Параметры рамки */border-bottom:none;/* Убираем линию снизу */padding:3px;/* Поля вокруг текста */display:inline;/* Устанавливаем как строчный элемент */background:#efecdf;/* Цвет фона */font-weight:bold;/* Жирное начертание */font-size:90%;/* Размер текста */margin:0;/* Убираем отступы */white-space:nowrap;/* Отменяем переносы текста */>style>head>body>pclass="exampleTitle">Примерp>pclass="example">br/>html>br/>body>br/>b>Формула серной кислоты:b>i>Hsub>small>2small>sub> SOsub>small>4small>sub>i>br/>body>br/>html>p>body>html>
