CSS | Модуль отображения | Уровень 3 | Введение — efim360.ru

CSS | Модуль отображения | Уровень 3 | Введение

Этот раздел является нормативным.

CSS берёт исходный документ, организованный в виде дерева tree из элементов elements (которое может содержать сочетание других элементов и текстовых узлов) и текстовых узлов text nodes (которые могут содержать текст), и отображает его на холсте, таком как ваш экран, лист бумаги, или звуковой поток. Хотя любой такой исходный документ можно отобразить с помощью CSS, наиболее часто используемым типом является DOM. [DOM] (Некоторые из этих более сложных типов деревьев могут иметь дополнительные типы узлов, такие как узлы комментариев в DOM. Для целей CSS все эти дополнительные типы узлов игнорируются, как если бы они не существовали.)

Для этого он генерирует промежуточную структуру, дерево блоков box tree, которое представляет структуру форматирования отображаемого документа. Каждый блок box в дереве блоков представляет соответствующий элемент (или псевдоэлемент) в пространстве и/или времени на холсте, в то время как каждый запуск текста text run в дереве блоков, также представляет содержимое соответствующих ему текстовых узлов.

 

Чтобы создать дерево блоков, CSS сначала использует каскадирование и наследование, чтобы присвоить вычисленное значение для каждого свойства CSS каждому элементу и текстовому узлу в исходном дереве. (См. [CSS-CASCADE-3].)

Затем для каждого элемента, CSS создаёт ноль или более блоков, как указано в свойстве 'display' этого элемента. Как правило, элемент генерирует один блок, основной блок, который представляет себя и содержит своё содержимое в дереве блоков. Однако некоторые отображаемые значения (например, 'display: list-item') генерируют более одного блока (например, основной блок-коробку и дочерний блок-маркер). А некоторые значения (такие как 'none' или 'contents') приводят к тому, что элемент и/или его потомки вообще не создают никаких блоков. Блоки часто называют по их типу отображения 'display', например. блок, генерируемый элементом с 'display: block', называется «блочным блоком» или просто «блоком».

Блоку назначаются те же стили, что и его генерирующему элементу, если не указано иное. Как правило, унаследованные свойства назначаются основному блоку, а затем наследуются через дерево блоков любым другим блокам, созданным тем же элементом. Ненаследуемые свойства по умолчанию применяются к основному блоку, но когда элемент создаёт несколько блоков, иногда определяется, что они применяются к другому блоку: например, свойства границы 'border', применённые к элементу таблицы, применяются к его блоку сетки таблицы, а не к другому блоку в его основную оболочку таблицы. Если процесс вычисления значения изменяет стили этих полей и запрашивается стиль элемента (например, через getComputedStyle()), элемент отражает для каждого свойства значение из поля, к которому было применено это свойство.

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

При построении дерева блоков, блоки, сгенерированные элементом, являются потомками основного блока любых элементов-предков. В общем случае непосредственным родительским блоком parent box основного блока элемента является главный блок его ближайшего элемента-предка, который генерирует блок; однако есть некоторые исключения, например, для блоков 'run-in', типов отображения (таких как таблицы), которые генерируют несколько блоков-контейнеров, и промежуточных анонимных блоков.

 

Анонимный блок (anonymous box) - это блок, не связанный ни с одним элементом. Анонимные блоки генерируются при определенных обстоятельствах для исправления дерева блоков, когда для него требуется определенная вложенная структура, которая не обеспечивается блоками, созданными из дерева элементов. Например, блок ячейки таблицы требует определённого типа родительского блока (блок строки таблицы) и будет генерировать анонимный блок строки таблицы вокруг себя, если его родительский блок не является блоком строки таблицы. (См. [CSS2] § 17.2.1.) В отличие от блоков, сгенерированных элементами, стили которых наследуются строго через дерево элементов, анонимные блоки (которые существуют только в дереве блоков) наследуются через их происхождение в дереве блоков.

В процессе вёрстки блоки и текстовые прогоны могут быть разбиты на несколько фрагментов. Это происходит, например, когда встроенный блок и/или текст разбивается на строки или блок коробку разбивается на страницы или столбцы в процессе, называемом фрагментацией. Это также может произойти из-за двунаправленного переупорядочения текста (см. Применение Алгоритма Двунаправленного Переупорядочения в Режимах Написания CSS) или разделения блока типа отображения более высокого уровня, например разбиение блока в строке (см. CSS2 §9.2) или разбиение столбца в блоке (см. CSS Multi-column Layout). Таким образом, блок состоит из одного или нескольких фрагментов блока, а текстовый ряд состоит из одного или нескольких текстовых фрагментов. См. [CSS-BREAK-3] для получения дополнительной информации о фрагментации.

 

Примечание

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

 

Примечание

Дополнительную информацию о «слуховом»“aural” дереве блоков и его взаимодействии со свойством отображения 'display' можно найти в модуле речи CSS. [CSS-SPEECH-1]

 

1.1. Взаимодействие модулей

Этот модуль заменяет и расширяет определение свойства отображения 'display', определённое в разделе 9.2.4 [CSS2].

Ни одно из свойств этого модуля не применяется к псевдоэлементам ::first-line или ::first-letter.

 

1.2. Определения значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определённые в этой спецификации, определены в значениях и единицах CSS [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.

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

 

Информационные ссылки

CSS | Модуль отображения | Уровень 3

Стандарт "CSS Display Module Level 3" - https://drafts.csswg.org/css-display/#intro

Поделись записью