Отображение #

Block #

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

xxxxxxxxxx

block

{}

.block {
  display: block;
}

Inline Block #

Утилита inline-block генерирует блок блочного элемента, который будет объединен с окружающим контентом, как если бы он был одним встроенным блоком (ведет себя так же, как замененный элемент).

xxxxxxxxxx

inline-block

{}

.inline-block {
  display: inline-block;
}

Inline #

Утилита inline генерирует одно или несколько встроенных блоков элементов, которые не создают разрывы строк до или после себя. В нормальном потоке следующий элемент будет на той же строке, если есть пробел.

xxxxxxxxxx

inline

{}

.inline {
  display: inline;
}

Flow Root #

Утилита flow-root генерирует блок блочного элемента, который устанавливает новый контекст форматирования блока, определяя, где форматирование рут лежит.

flow-root

{}

.flow-root {
  display: flow-root;
}

Contents #

Утилиты contents сами по себе не создают конкретный ящик. Их заменяют их псевдобоксы и их дочерние блоки.

xxxxxxxxxx

contents

{}

.contents {
  display: contents;
}

Hidden #

Отключает display элемента, чтобы он не влиял на макет (документ отображается так, как будто этот элемент не существует). У всех дочерних элементов также отключено отображение. Чтобы элемент занимал место, которое он обычно занимает, но без фактического рендеринга чего-либо, используйте вместо этого свойство visibility.

xxxxxxxxxx

hidden

{}

.hidden {
  display: none;
}

Visibility #

Утилиты для управления видимостью элемента. Свойство CSS visibility показывает или скрывает элемент без изменения макета документа. Это свойство также может скрывать строки или столбцы в <table>.

xxxxxxxxxx

visible

{}

.visible {
  visibility: visible;
}

Backface Visibility #

Утилита backface устанавливает, будет ли видна задняя грань элемента при повороте к пользователю.

xxxxxxxxxx

backface-hidden

{}

.backface-hidden {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

List Item #

Утилита list-item генерирует псевдоэлемент ::marker с содержимым, указанным в его свойствах list-style (например, маркер) вместе с основным ящиком указанного типа для собственного содержимого.

xxxxxxxxxx

list-item

{}

.list-item {
  display: list-item;
}