Block display style: display — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

Содержание

Настройки дисплея | Университет Webflow

В этом видео используется старый пользовательский интерфейс. Скоро будет обновленная версия!

Параметры отображения, расположенные на панели «Стиль», управляют поведением макета элемента и содержимым вокруг этого элемента. Здесь вы можете контролировать, как элементы отображаются по отношению друг к другу — расположены ли они друг над другом или расположены рядом.

В этой статье мы рассмотрим каждый параметр отображения на панели «Стиль»:

Блок
Flexbox
Сетка
Встроенный блок
Встроенный
Отображение: нет

Блокировка большинства элементов. Настройка по умолчанию. Каждый элемент блока начинается с новой строки и занимает всю ширину своего родительского элемента, если не задана пользовательская ширина.
Независимо от ширины каждый элемент блока будет помещать следующий элемент на новую строку. Чтобы расположить элементы рядом, выберите другой параметр макета, например встроенный блок.
Flexbox
Элементы с гибкой компоновкой располагают своих прямых дочерних элементов горизонтально или вертикально.
Вы можете настроить, как укладываются прямые дочерние элементы, когда они переносятся, как они выравниваются и выравниваются внутри гибкого контейнера.
При создании гибкого контейнера все прямые дочерние элементы этого родительского элемента становятся гибкими дочерними элементами. Вы можете добавить и переопределить макет дочерних элементов flex в настройках дочернего элемента flex.
Узнайте больше о гибких макетах.
Сетка
Элементы с сеткой располагают своих дочерних элементов по нескольким столбцам и строкам.
Можно настроить расположение, выравнивание и распределение непосредственных дочерних элементов в компонентах сетки: контейнере, отдельных ячейках, группе ячеек или дорожках.
В макетах сетки можно указать промежутки между столбцами и строками, называемые дорожками. Вы также можете использовать модуль FR для создания полностью плавных макетов сетки.
Настройки дочерних элементов сетки отображаются в верхней части панели «Стиль», когда выбран дочерний элемент контейнера сетки. Они позволяют переопределить настройки контейнера сетки для выравнивания и выравнивания.
Узнайте больше о сетке.
Grid vs Flex
Flexbox и grid — отличные варианты компоновки. Flexbox дает вам элементы управления макетом в одном измерении — вертикальном или горизонтальном. Сетка дает вам элементы управления макетом, которые работают в двух измерениях, что отлично подходит, например, для журнальных макетов.
Для получения более подробной информации о каждом варианте макета, различиях между ними и о том, когда вы можете захотеть использовать один вместо другого, посмотрите наш видеоурок о флексбоксе и сетке.
Встроенный блок
Элементы встроенного блока располагаются рядом друг с другом, а их ширина определяется содержимым внутри.
Элементы встроенного блока также будут переноситься, когда содержимое достигает границы родительского элемента. На панели «Стиль» вы можете применить определенные параметры ширины, высоты, отступов и полей к элементам встроенного блока.
Распространенная проблема при использовании встроенных блочных элементов заключается в том, что пробелы в HTML становятся визуальным пространством в дизайне сайта. Узнайте, как исправить проблемы с пробелами .
Встроенный
Встроенный — это параметр отображения по умолчанию для любого текстового содержимого внутри элемента. Вы можете изменить макет встроенного элемента, изменив его поля и отступы, но вы не можете изменить его ширину или высоту.
Отображение: нет
Чтобы полностью скрыть элемент, установите его настройку отображения на нет.
Элементы, настроенные для отображения none, не будут отображаться браузером, что может быть удобно для изменения способа отображения содержимого на мобильных устройствах.
Дисплей CSS
Свойство CSS display используется для указания, должен ли элемент отображаться, и если да, то как он будет отображаться.
Свойство display определяет тип отображения элемента. Тип отображения относится к тому, как элемент создает блоки. Существует два основных типа дисплея:
Тип внутреннего дисплея
Определяет (если это незаменяемый элемент) вид контекста форматирования, который он генерирует, который определяет, как размещаются его блоки-потомки.
Тип внешнего дисплея
Указывает, как поле участвует в своем родительском контексте форматирования.
Примеры кодов
а { дисплей: блок; } дел { дисплей: встроенный; } .скрытый { дисплей: нет; }
Возможные значения
CSS3 внес значительные изменения в значения, доступные для свойства display . Ниже приведены значения, доступные в CSS2, а ниже — значения, доступные в CSS3, вместе с объяснением каждого значения.

CSS2
В CSS2 свойство display может принимать любое из следующих значений:
встроенный | блок | элемент списка | встроенный блок | стол | встроенный стол | таблица-строка-группа | группа заголовков таблиц | группа нижнего колонтитула | таблица-строка | таблица-колонка-группа | стол-столбец | таблица-ячейка | заголовок таблицы | нет | унаследовать
CSS2
CSS3 расширяет этот список. В CSS3 свойство display может принимать любое из следующих значений:
.
[ <отображение снаружи> || <отображение внутри> ] | <элемент списка отображения> | <внутренний дисплей> | <поле дисплея> | <дисплей-устаревший>
И каждое из этих значений CSS3 определяется следующим образом:
= блок | встроенный | вбежать ; <отображение внутри> = поток | поток-корень | стол | гибкий | сетка | Рубин ;
= элемент списка && ? && [поток | корень потока]? = table-row-group | группа заголовков таблиц | группа нижнего колонтитула | таблица-строка | таблица-ячейка | таблица-колонка-группа | стол-столбец | заголовок таблицы | рубиновая основа | рубиновый текст | рубиновый базовый контейнер | рубиновый текстовый контейнер; = содержимое | никто ; = встроенный блок | встроенный элемент списка | встроенный стол | встроенный гибкий | встроенная сетка ;
Ниже приведено более подробное объяснение значений, определенных в CSS3.
<дисплей снаружи>
Эти ключевые слова определяют тип внешнего отображения элемента, который, по сути, является его ролью в расположении потока.

блок
Элемент создает блок уровня блока.
встроенный
Элемент создает поле встроенного уровня.
обкатка
Элемент создает поле запуска. Элементы запуска действуют как встроенные строки или блоки, в зависимости от окружающих элементов.
<дисплей внутри>
Эти ключевые слова определяют тип внутреннего отображения элемента, который определяет тип контекста форматирования, в котором размещается его содержимое (при условии, что это незаменяемый элемент).
поток
Элемент размещает свое содержимое с использованием потоковой компоновки (блочной и встроенной компоновки).
Если его внешний тип отображения равен inline или run-in , и он участвует в блочном или встроенном контексте форматирования, тогда он генерирует встроенный блок. В противном случае он генерирует блок-контейнер.
В зависимости от значения других свойств (таких как position, float или overflow) и от того, участвует ли он сам в блочном или встроенном контексте форматирования, он либо устанавливает новый контекст форматирования блока для своего содержимого, либо интегрирует свое содержимое в родительский контекст форматирования.
корневой поток
Элемент создает блок-контейнер и размещает его содержимое с помощью потоковой компоновки. Он всегда устанавливает новый контекст форматирования блока для его содержимого.
стол
Элемент создает блок-оболочку основной таблицы, содержащий дополнительно сгенерированный блок таблицы, и устанавливает контекст форматирования таблицы.

В основном элемент ведет себя как таблица элемент.
гибкий
Это для гибких макетов. Когда вы применяете display: flex к элементу, он создает основной контейнер flex и устанавливает контекст форматирования flex.
В модели гибкого макета дочерние элементы гибкого контейнера могут располагаться в любом направлении и могут «изгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо уменьшаясь, чтобы избежать переполнения родительского элемента.
См. пример свойства flex .
сетка
Элемент создает основной блок-контейнер сетки и устанавливает контекст форматирования сетки.
В модели компоновки сетки дочерние элементы контейнера сетки могут располагаться в произвольных слотах предопределенной сетки компоновки гибкого или фиксированного размера. В отличие от гибкого макета блока, ориентированного на одну ось, макет сетки оптимизирован для двумерных макетов: таких, в которых желательно выравнивание содержимого в обоих измерениях.

рубин
Элемент создает основной контейнер ruby и устанавливает контекст форматирования ruby.
Ruby — это короткие фрагменты текста рядом с основным текстом. Обычно они используются в документах Восточной Азии для обозначения произношения или краткой аннотации.
См. элемент ruby для примера использования ruby.
<элемент списка отображения>
Здесь вы указываете ключевое слово list-item вместе с одним или двумя необязательными ключевыми словами для указания отображения

и .
Ключевое слово list-item заставляет элемент генерировать блок псевдоэлемента ::marker с содержимым, указанным его свойствами стиля списка, вместе с основным блоком указанного типа для его собственного содержимого.
Если значение не указано, тип внутреннего отображения основного блока по умолчанию равен поток . Если значение не указано, тип внешнего дисплея основного блока по умолчанию равен block .
Пример:
Дисплей
: поток блоков списка;
<внутренний дисплей>
Некоторые модели макетов, такие как table и ruby , имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Каждое ключевое слово
имеет значение только в соответствующем режиме макета.
Если не указано иное, как для внутреннего, так и для внешнего типа отображения элементов, использующих эти значения, устанавливается заданное ключевое слово.
Ключевые слова определяются следующим образом:
таблица-строка-группа
Элемент ведет себя как элемент tbody .
таблица-заголовок-группа
Элемент ведет себя как элемент или .
таблица-нижний колонтитул
Элемент ведет себя как элемент высотой футов.
стол-ряд
Элемент ведет себя как элемент tr .
таблица-строка-группа
Элемент ведет себя как элемент tbody .
таблица-ячейка
Элемент ведет себя как элемент td .
таблица-колонка-группа
Элемент ведет себя как элемент colgroup .
таблица-столбец
Элемент ведет себя как элемент col .
таблица-заголовок
Элемент ведет себя как элемент заголовка .
таблица-строка-группа
Элемент ведет себя как элемент tbody .
рубиновая основа
Элемент ведет себя как элемент rb .
рубиновый текст
Элемент ведет себя как элемент rt .
рубиновая основа-контейнер
Элемент ведет себя как элемент XHTML rbc .
рубиновый текстовый контейнер
Элемент ведет себя как элемент rtc .
<коробка дисплея>
Эти ключевые слова определяют, будет ли элемент вообще создавать какие-либо поля.
содержимое
Сам элемент не создает никаких блоков, но его дочерние элементы и псевдоэлементы по-прежнему создают блоки как обычно.
нет
Элемент и его потомки не создают ящиков. Элемент и его потомки не отображаются и не занимают места в макете страницы (как будто их не существует).

CSS2 использовал синтаксис с одним ключевым словом для отображения, требуя отдельных ключевых слов для блочных и встроенных вариантов одного и того же режима макета. CSS3 изменил это, так что для достижения одного и того же эффекта можно было использовать несколько ключевых слов.
Однако синтаксис CSS2 по-прежнему действует в CSS3, а ключевые слова CSS2 называются ключевыми словами .
Эти ключевые слова:
встроенный блок
Ведет себя как встроенный корневой поток .
встроенный стол
Ведет себя как встроенная таблица .
встроенный гибкий
Ведет себя как встроенный гибкий .
встроенная сетка
Ведет себя как встроенная сетка .
Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:
начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.
Общая информация
Исходное значение
рядный
Применяется к
Все элементы
Унаследовано?
№
СМИ
Все
Официальные спецификации
Свойство display определено в CSS Display Module Level 3 (рабочий проект W3C).
Свойство display определено в спецификации каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1) (рекомендация W3C от 7 июня 2011 г.).