CSS Spec - Атомный Инлайн Уровень Боксы

Question

Я пытаюсь обернуть мой мозг вокруг некоторых тонкостей CSS, и я нашел эту часть этого отрывка из W3 CSS Visual Formatting Spec 9.2.2 особенно тупых:

коробки строкового уровня которые не являются встроенными блоками (например, замененными встроенными элементами, элементами встроенного блока и элементами inline-table), называются атомарными ящиками на уровне строки, поскольку они участвуют в контексте их встроенного форматирования как в одном непрозрачном поле.

Что именно они подразумевают под одной непрозрачной коробкой?

Любые разъяснения очень ценятся. Благодаря!

Answer 1

Это означает, что ящик представляет собой единое целое единое целое и что его нельзя разделить на линии, как встроенное поле, когда его текст не может быть помещен в одну строку. См. section 9.4.2, в котором описывается это поведение расщепления и термины «контекст форматирования форматирования» и «строка строки».

Если больше нет места на линию, чтобы соответствовать атомному строковому блоку, всей коробку обручей на следующую строку, если есть возможность разрыва строки (в противном случае она не переполняется поле строки), даже если атомный встроенный блок содержит встроенный контент, который будет частично соответствовать оставшемуся пространству в текущей строке. Это связано с тем, что встроенное содержимое атома inline не участвует в том же встроенном контексте форматирования, что и сама атомарная строка: он участвует в отдельном встроенном контексте форматирования в пределах атомарного встроенного блока и, следовательно, должен оставаться в пределах границ атомный встроенный ящик.

Сравнить:

p { 
 
    width: 5em; 
 
    background-color: #f0f0f0; 
 
} 
 

 
span { 
 
    background-color: #d0d0d0; 
 
} 
 

 
.inline-block { 
 
    display: inline-block; 
 
    width: 4.5em; 
 
}

<p>text <span class=inline>inline text</span> more text 
 
<p>text <span class=inline-block>inline block</span> more text

Answer 2

Чтобы понять эту концепцию, вам понадобится дополнительный контекст из одной и той же точки спецификации вы связаны, а именно:

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

После чего следует ваша цитата.

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

sample <span>placeholder text</span> here

Как вы можете видеть, все элементы упрощенная, упрощенная, что означает, что это возможно по одной и той же линии, когда это возможно.
Теперь, что представляют собой атомные встроенные ящики и что означает ваша цитата?
Во-первых, давайте рассмотрим следующий пример:

.at { 
 
    display: inline-block; 
 
}

sample <div class="at"><div>placeholder</div><div>text</div></div>here

Атомное поле в этом случае является делитель с классом at. Он участвует в рендеринге как встроенном элементе, но его дети могут быть расположены любым образом независимо от встроенного позиционирования. Это непрозрачная коробка для встроенного рендеринга.