Изучаем display CSS: свойства

display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block, inline CSS и none. Также часто используются table и inline block CSS. Новым и весьма полезным является значение flex, потому что оно было создано специально для разметки.

При рассмотрении свойства display нельзя не упомянуть дерево блоков. Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.

display css — свойства, которые мы уже достаточно хорошо знаем

Значения свойства display, которые мы постоянно используем — на самом деле сокращения. Например, block — сокращение от block flow. Полный список можно найти в спецификации.

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

display: none CSS

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

display inline


Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.

display: block CSS — что это?


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

display: list-item

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

display inline block — что значит в CSS?

Создается позиция для блочного элемента, но все поле ведет себя как, встроенный элемент. Попробуйте открыть приведенный выше пример и изменить ширину окна, чтобы лучше понять, как это работает.

Адаптивный пошаговый обработчик

Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет «ломался«.

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

Помните макеты на основе таблиц?

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

tableСоответствует HTML-элементу <table>. Определяет структурный блок.
table-header-groupСоответствует HTML-элементу <thead>.
table-rowСоответствует HTML-элементу <tr>.
display table-cellСоответствует HTML-элементу <td>.
table-row-groupСоответствует HTML-элементу <tbody>.
table-footer-groupСоответствует HTML-элементу <tfoot>.
table-column-groupСоответствует HTML-элементу <colgroup>.
table-columnСоответствует HTML-элементу <col>.
table-captionСоответствует HTML-элементу <caption>.
inline-table CSSЭто единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.
@media screen and (min-width: 720px) {
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
}
.tr {
  margin-bottom: 1.6rem;
}
@media screen and (min-width: 720px) {
  .tr {
    display: table-row;
  }
}
@media screen and (min-width: 720px) {
  .td {
    display: table-cell;
    border: #f0f0f0 1px solid;
    padding: 0.4rem;
  }
  .td:first-child {
    width: 11em;
  }
}
.th {
  font-size: 1rem;
  line-height: 1.6rem;
  font-family: "Palo Alto";
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 1.294rem;
    line-height: 1.6rem;
  }
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 0.8rem;
    line-height: 1.6rem;
    font-family: "Roboto Slab", Rockwell, serif;
    font-weight: 700;
  }
}
@media screen and (min-width: 720px) and (min-width: 720px) {
  .th {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
.th::before {
  content: 'display: ';
}
@media screen and (min-width: 720px) {
  .th::before {
    content: '';
  }
}
.th::after {
  content: ';';
}
@media screen and (min-width: 720px) {
  .th::after {
    content: '';
  }
}

Новые виды блоков

Автор спецификаций Flexbox и Grid, сделал очень меткое замечание по поводу новых режимов отображения:

inline flex CSS предназначен для одномерных макетов, которые можно уложить в одну строку.

Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.

display: flex;

Введение режима flexbox или CSS Flexible Box, ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.

Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.

И когда появился CSS, мы перешли на плавающие макеты, вкладывая элементы в различные div, чтобы они обтекали и смещались, как нам нужно а. Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:


Объявляя для элемента display в CSS: flex, inline flex CSS, мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер, и flex-элементы имеют соответствующие им свойства.

Свойства для flex-контейнера

flex-direction — определяет главную ось и направление гибких элементов. Полный список значений flex-direction.
flex-wrap — указывает, должны ли flex-элементы настраиваться таким образом, чтобы поместиться в одну строку, или они могут быть перенесены на несколько строк. Полный список значений flex-wrap.
flex-flow — сокращенное свойство от flex-direction и flex-wrap. Полный список значений flex-flow.
justify-content — определяет, как распределяется вдоль главной оси пространство между и вокруг flex-элементов. Полный список значений justify-content.
align-items — определяет, как пространство между и вокруг flex-элементов распределяется перпендикулярно главной оси. Полный список значений align-items.
align-content — определяет, как линии flex-элементов распределены внутри контейнера. Не применяется, если элементы размещаются только в одной строке. Полный список значений align-content.

Свойства flex-элементов

order — указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS.
flex-grow — определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow.
flex-shrink — определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink.
flex-basis — определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis.
flex — сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex.
align-self — позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self.

display: grid;

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

Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox, эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML.

Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms-. Когда-то так было и с  inline block CSS.

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

Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить «экспериментальные функции веб-платформы». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled — true.

Основные термины CSS grid

Сеточный контейнер — аналогично концепции гибкого контейнера, применив к элементу `display: grid;` мы делаем его дочерние элементы сеточными элементами.

Сеточный элемент — если к родительскому элементу применено `display: grid;` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.

Трек сетки — это может быть либо столбец или ряд сетки.


Линия сетки — линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.


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


Пространство сетки — это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.


Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.

Малоизвестные и экспериментальные значения

display: run-in;

Устанавливает элемент как встроенный или блочный в зависимости от контекста.

display: ruby;

Для начала стоит представить элемент <ruby>. В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.

Существуют определенные общие черты между свойствами display: ruby и inline table CSS, но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста. Вместо этого лучше разметить контент с использованием HTML-элементов ruby, чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby.

rubyСоответствует HTML-элементу <ruby>. Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки.
ruby-baseСоответствует HTML-элементу <rb>. Внутренний ruby-блок в ruby-контексте.
ruby-textСоответствует HTML-элементу <rt>. Внутренний ruby-блок в ruby-контексте.
ruby-base-containerСоответствует HTML-элементу <rbc>. Внутренний ruby-блок в ruby-контексте.
ruby-text-containerСоответствует HTML-элементу <rtc>. Внутренний ruby-блок в ruby-контексте.

display: contents;

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

— CSS Display Level Модуль 3


Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents, он исчезнет из DOM. Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox. Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.

Заключение

Описание inline CSS и других значений display заняло намного больше времени, чем первоначально ожидалось. Я действительно взволнован по поводу новых возможностей, которые уже очень скоро окажутся в нашем распоряжении. С их помощью мы сможем создавать уникальные макеты без необходимости прибегать к хакам. Я надеюсь, что эта статья мотивирует вас узнать больше о макетах CSS.

Данная публикация является переводом статьи «How well do you know CSS display?» , подготовленная редакцией проекта.

Меню