Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 29.03.2024)
440790
солдат
347
самолетов
325
вертолетов
6922
танков
13264
ББМ
10991
артиллерия
735
ПВО
1023
РСЗО
14645
машин
26
корабли и катера
Разбираем свойство display в CSS
Опубликовано Обновлено: 27.01.2024

Разбираем свойство display в CSS

Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block, inline и none. Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.

 

Прежде чем мы поговорим о свойстве display, мы должны упомянуть «дерево блоков» (box tree).

CSS берет исходный документ, организованный как дерево элементов и текстовых узлов, и отображает его на холст (например, экран монитора). Для этого он создает промежуточную структуру, дерево блоков, которая представляет собой структуру форматирования для готового (визуализированного) документа. Каждый блок в дереве блоков соответствует соответствующему элементу в пространстве и/или времени на холсте.

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

Все элементы имеют значение display по умолчанию, но его можно переопределить, явно установив значение display на что-то другое. Значение по умолчанию в XML (а также для элементов SVG) является inline. А в HTML значения свойств display по умолчанию берутся из поведения, описанного в спецификациях HTML, или из таблицы стилей по умолчанию для браузера/пользователя.

 

Основные значения свойства display в CSS

display: block;

Элемент генерирует «коробку» блочного уровня. Все элементы на этом уровне начинаются с новой строки (вертикально) и, если не указано иное, растягиваются до ширины своего контейнера. Элементы прилегают вплотную друг к другу, если для них не заданы отступы (margin).

 

display: none;

Удаляет элемент и его дочерние элементы из обычного потока документа. Документ отображается так, как будто этого элемента никогда не было, а занимаемое им место не резервируется. Считыватели экрана также игнорируют содержимое такого элемента.

 

display: inline;

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

 

display: list-item;

Элемент, отображаемый как элемент списка, ведет себя точно так же, как элемент блочного уровня, но дополнительно создает поле для маркера. Только элементы <li> имеют значение по умолчанию для элемента списка (list-item). Значение обычно используется для возврата элементов <li> к их дефолтному поведению.

 

display: inline-block;

Элемент генерирует «коробку» блочного уровня, но весь блок ведет себя как встроенный (инлайновый) элемент. Т.е., он «обтекается» другими элементами веб-страницы.

 

Табличный уровень

Существует много значений display, которые позволяют элементам вести себя так же, как и HTML таблицы. В таблице ниже представлены значения «табличного уровня» и их краткое описание.

table Соотносится с <table> HTML элементом. Определяет «коробку» блочного уровня.
table-header-group Соотносится с <thead> HTML элементом.
table-row Соотносится с <tr> HTML элементом.
table-cell Соотносится с <td> HTML элементом.
table-row-group Соотносится с <tbody> HTML элементом.
table-footer-group Соотносится с <tfoot> HTML элементом.
table-column-group Соотносится с <colgroup> HTML элементом.
table-column Соотносится с <col> HTML элементом.
table-caption Соотносится с <caption> HTML элементом.
inline-table Это единственное значение, которое не имеет прямого сопоставления с HTML элементом. Элемент будет вести себя как элемент HTML таблицы, но как инлайновый блок, а не как элемент блочного уровня.

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

 

Более современные значения

Способ отображения контента на веб-странице достаточно сильно изменился с момента появления HTML. Когда веб-дизайнеры хотели создать какой-то креативный макет, первым используемым методом было вложение HTML-таблиц (табличные макеты).

А когда CSS ставал все более популярным, верстальщики перешли к плавающим макетам, размещая контент в разных плавающих div, чтобы добиться желаемого эффекта. Такая техника до сих пор очень распространена, но после появления flexbox (макета гибкой «коробки» в CSS), эта ситуация будет длиться все меньше. Когда макет гибкой «коробки» будет полностью поддерживаться всеми браузерами, гибкие макеты станут преобладающим методом верстки. Тем не менее, не все браузеры поддерживают спецификацию flexbox, и это сильно тормозит ее развитие. Рекомендуем почитать о Флексбоксе в нашем обзоре.

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

 

display: flex;

Объявляя display: flex; для элемента, он становится flex (гибким) контейнером, а его дочерние элементы становятся гибкими элементами этого контейнера. Свойства flex не распространяются на внуков этого элемента. Как гибкий контейнер, так и гибкие элементы имеют свои собственные гибкие свойства.

 

display: grid;

Элемент ведет себя как блочный и отображает содержимое в соответствии с моделью сетки. Модель сетки Grid Layout дает нам способ создания системы сеток и позволяет контролировать позиционирование элементов сетки исключительно с помощью CSS, без привлечения HTML. При использовании вместе с медиа-запросами сетка CSS становится мощным инструментом, когда дело доходит до проектирования и построения гибких макетов.

Обратите внимание, что CSS-сетка официально не реализована ни в одном браузере. Чтобы поддерживать ее, браузерам нужно указывать префиксы поставщиков и устанавливать флаги.

UPDATE: на данный момент данная модель имеет хорошую спецификацию и большую поддержку современными браузерами.

 

Экспериментальные значения (не должны использоваться в рабочем коде)

display: run-in;

Теоретически, если вы устанавливаете свойство display элемента в run-in, он отображается как блок внутри другого блока. Вариант использования этого свойства заключается в том, чтобы иметь собственный метод для создания заголовков, которые визуально располагаются в той же строке, что и последующий контент.

Для этой цели можно было бы использовать и float, но здесь подразумевается, что значение автоматически вписывается в строку и выравнивается по базовой линии.

Обратите внимание, что это значение поддерживается только в Internet Explorer 11 и Opera Mini.

 

display: ruby;

Элемент ведет себя как инлайновый и выдает свое содержимое в соответствии с моделью форматирования элемента <ruby> HTML. Если вкратце, то это позволяет отображать аннотации рядом с базовой линией текста (обычно для помощи в произношении). Такая техника довольно распространена в китайском и японском языках.

 

display: contents;

Суть этого значения заключается в том, что когда вы его используете для элемента, он исчезает из DOM, но все его потомки остаются и занимают свое пространство. Эта спецификация на данный момент поддерживается только в Firefox >59, Chrome >65, Safari 11.1.

 

Краткий итог

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

 

 

1 комментарий для “Разбираем свойство display в CSS

  1. Lookel

    Flexbox нужны вендорные префиксы для поддержки большинства браузеров.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *