From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/display/index.html | 218 ++++++++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 files/ru/web/css/display/index.html (limited to 'files/ru/web/css/display/index.html') diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html new file mode 100644 index 0000000000..3c40e975d0 --- /dev/null +++ b/files/ru/web/css/display/index.html @@ -0,0 +1,218 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display + - Справка +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

Свойство display (CSS) определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

+ +

Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.

+ +
/* <display-outside> values */
+display: block;
+display: inline;
+display: run-in;
+
+/* <display-inside> values */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* <display-outside> plus <display-inside> values */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* <display-listitem> values */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* <display-internal> values */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* <display-box> values */
+display: contents;
+display: none;
+
+/* <display-legacy> values */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+
+ +

{{CSSInfo}}

+ +

Синтаксис

+ +

Свойство display задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:

+ +
+
{{CSSxRef("<display-outside>")}}
+
Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.
+
{{CSSxRef("<display-inside>")}}
+
Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).
+
{{CSSxRef("<display-listitem>")}}
+
Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.
+
{{CSSxRef("<display-internal>")}}
+
Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.
+
{{CSSxRef("<display-box>")}}
+
Эти значения определяют, генерирует ли элемент отображение боксов вообще.
+
{{CSSxRef("<display-legacy>")}}
+
В CSS 2 используется синтаксис с одним ключевым словом для свойства display, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.
+
<display-xul> {{Non-standard_Inline}}{{Deprecated_Inline(62)}}
+
Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.
+
+ +

"Наследственные" значения отображения

+ +

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

+ +

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

+ +
.container {
+    display: inline flex;
+}
+ +

В настоящее время это можно задать с помощью одного значения.

+ +
.container {
+    display: inline-flex;
+}
+
+ +

Формальный синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений display, которые это свойство может принимать.

+ +

Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений display в других статьях на MDN:

+ + + +

Доступность

+ +

display: none;

+ +

Если свойство display принимает значение none на элементе,  то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.

+ +

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

+ +

display: contents;

+ +

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из  дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

+ + + +

Таблицы

+ +

Если у элемента {{HTMLElement("table")}} изменить значение свойства display на block, grid или flex, это изменит его представление в  дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Добавлены run-in, flow, flow-root, contents и multi-keyword значения.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Добавлены ruby, ruby-base, ruby-text, ruby-base-container и ruby-text-container.
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Добавлены значения модели grid бокс.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Добавлены значения модели flexible бокс.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Добавлены значения модели table и inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Начальное определение. Базовые значения: none, block, inline и list-item.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf