Блог

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

W3 утверждает, что

«линейный блок — это прямоугольная область, которая содержит (встроенные) блоки, образующие строку».

Затем говорится, что

«Линейные блоки создаются по мере необходимости для хранения содержимого встроенного уровня в контексте встроенного форматирования»

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

Однако тогда в нем говорится, что

Любой текст, который содержится непосредственно внутри элемента блочного контейнера (а не внутри встроенного элемента), должен обрабатываться как анонимный встроенный элемент.

Таким образом, текст внутри элемента встроенного уровня, например span , не помещается в анонимный встроенный блок.

Затем они приводят пример <P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P> и объясняют, что

Элемент P генерирует блок-блок, содержащий пять встроенных блоков, три из которых анонимны. Чтобы отформатировать абзац, агент пользователя помещает пять блоков в линейные блоки. В этом примере блок, созданный для элемента P, устанавливает содержащий блок для линейных блоков. Если содержащий блок достаточно широк, все встроенные блоки поместятся в один линейный блок. В противном случае встроенные блоки будут разделены и распределены по нескольким линейным блокам.

Это объяснение сбивает с толку, потому что в первом предложении говорится, что P генерирует блок-блок, содержащий встроенные блоки, но во втором предложении говорится, что содержащий блок, созданный элементом P, содержит линейные блоки.

Блок-бокс — это блочный контейнер, который также является блоком уровня блока. Итак, встроенные элементы не генерируют блоки блоков, но, по-видимому, они генерируют содержащие блоки. Являются ли блочные блоки и содержащие блоки одним и тем же в этом контексте?

Поскольку блок встроенного уровня, like Span может содержать другие встроенные блоки, например strong или em , это означает, что элементы встроенного уровня также могут быть блочными контейнерами, но они не образуют блочные блоки (или они?), И их текстовое содержимое не помещается в анонимный блок.

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

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

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

Я бы хотел, чтобы W3 был более четким с их объяснением.

Ваш заголовок и первый абзац задают два разных вопроса:

• Устанавливают ли встроенные элементы линейный блок для своего содержимого?
• [Являются ли] линейные блоки сформированными внутри элементов встроенного уровня?

У них разные ответы: «Нет» и «Иногда» соответственно, поэтому первое, с чем нужно разобраться, — это -level суффикс.

Блок встроенного уровня — это более широкая категория, чем встроенный блок. Элемент span, содержащий только текст, по умолчанию генерирует последовательность встроенных блоков, достаточную для размещения текстового содержимого на столько строк, сколько необходимо. Все встроенные блоки также являются блоками встроенного уровня, но обратное неверно. Элементы, вычисляемое отображение которых равно inline-block , inline-table , inline-flex и inline-grid все генерируют блоки, которые являются встроенными, но не являются встроенными блоками.

Аналогично относится к блочным и блочным уровням. Уровень блока описывает, как блок располагается относительно его родителей, братьев и сестер. Блочные контейнеры — это блоки, в которых их дочерние блоки расположены либо как последовательность блоков на уровне блоков, либо внутри стека линейных блоков, и никогда как смесь обоих.

Элементы, вычисленное отображаемое значение которых равно block , flow-root и list-item и Размещаются в контексте форматирования блока (т. Е. Они не являются гибким элементом или элементом сетки), генерируют единый блок, который является как блочным, так и блочным контейнером. Они называются блочными блоками.

Но блоки, созданные для элементов, которые имеют вычисленные отображаемые значения table , flex , и grid являются блочными, но они не являются блочными контейнерами. Их потомки размещаются с использованием разных правил. Это не блочные блоки.

И наоборот, элементы, которые вычислили отображаемые значения inline-block и table-cell генерируют блоки, которые являются блочными контейнерами, но они не являются блочными. Они взаимодействуют со своими родителями, братьями и сестрами иначе, чем блоки уровня блоков.

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

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

Итак, предположим, у нас есть это дерево блоков

  display:block                     block level, block container
   |                                                     ↑   ↑ 
     - display:inline              inline level ---------    |      
         |                                                   |     |- In the same line box
           - display:inline-block  inline level, block container  /
               |                                          ↑
                 some text         anonymous inline box --        in a line box 
 

где стрелки указывают от блоков встроенного уровня к их блочному контейнеру.