При каком значении свойства display элемент не будет выводиться

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

Стандартное представление браузером большинства HTML-элементов включает стили шрифта, отступы, поля и, главным образом, типы отображения (display).

Главными типами отображения являются inline (встроенный), none (не показывать) и block-line (блок). Вы можете применять их, используя значения свойства display: inline, block и none.

inline действует так, как подсказывает его имя. Элементы, представленные с помощью inline всегда следуют потоку линии. Элементы strong (жирное начертание), emphasis (курсив) и anchor (якорь) обычно представлены инлайном на большинстве страниц.

block помещает разрыв строки над и под элементом. Элементы абзац и заголовок обычно отображаются в стиле block-line.

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

Изначальная таблица стилей для моего сайта, например, использовала несколько элементов, которые традиционно применяются in-line и block-line, чтобы сделать дизайн лучше.

h1 {
display: inline;
font-size: 2em;
}

#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

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

#navigation, #seeAlso, #comments, #standards {
display: none;
}

Код, указанный выше, применяется для страниц для печати. Этот стиль «отключает» панель навигации, комментарии и т.д., которые обычно избыточны при распечатке.

display: none и visibility: hidden различаются в том, что display: none стирает элемент полностью со страницы, в то время, как visibility: hidden содержит элемент и его поток нетронутыми в визуальном представлении.

Например, если для второго из трех абзацев установить display: none, первый параграф приблизится вплотную к третьему. Если бы мы установили свойство visibility: hidden, то между первым и третьим абзацем осталось пустое пространство, где должен быть абзац.

Таблицы и свойства

Самый простой способ понять значения табличных свойств отображения, это рассматривать их в контексте HTML-таблиц. table – это базовое представление. Вы также можете представить элементы tr и td значениями свойств table-row и table-cell соответственно.

Свойство display дает вам еще больше возможностей и предлагает вам в качестве значений table-column, table-row-group, table-column-group, table-header-group, table-footer-group и table-caption. Я думаю, все эти значения говорят сами за себя. Что сразу приходит на ум – это преимущество конструирования таблиц колонками вместо метода, который применяется в HTML

В конечном счете значение inline-table фактически помещает вашу таблицу без разрывов строк сверху и снизу.

Если вы позволите себе увлечься CSS таблицами, доступность вашего сайта может серьезно пострадать. Цель HTML – передать значение. Следовательно, любые данные, которые должны быть представлены в табличном виде, лучше отображать при помощи значений HTML.

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

Другие типы отображения

list-item говорит сам за себя. Работает практически идентично элементу li в HTML. Для корректного отображения, элементы должны быть вложены внутри элементов ul или ol.

run-in показывает элемент в строке или блоке. Это зависит от того, как показывается родительский элемент. Помните, что этот функционал недоступен в IE и браузерах на основе Mozilla.

compact также показывает элемент встроенным в линию или блок в зависимости от контекста. Он также не очень полезен…

marker используется только вместе с псевдоэлементами :before и :after, чтобы описать отображение значения свойства content. По умолчанию свойство content уже отображается как marker. Поэтому marker полезен тогда, когда вы пытаетесь переписать предыдущее свойство display для псевдоэлемента.

Свойство 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 таблицы. В таблице ниже представлены значения «табличного уровня» и их краткое описание.

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

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

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

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

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

display: flex;

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

display: grid;

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

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

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

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 действительно внушительный. Ведь развитие технологий обусловливает появление и новых методик, и новых подходов к решению различных задач в веб-дизайне. Хотя, с другой стороны, многие методики становятся морально устаревшими и теряют свою былую славу. Надеемся, что данная статья поможет вам идти в ногу со временем и позволит более эффективно решать задачи верстки.