В чем разница между «содержащим блоком» и «блоком-контейнером» в CSS? - PullRequest
Новая
       38

В чем разница между «содержащим блоком» и «блоком-контейнером» в CSS?

3 голосов
/ 17 мая 2019

Я читаю спецификации CSS, раздел Модель визуального форматирования и пытаюсь понять, в чем разница между этими двумя терминами: containing block и block container box.

Что меня смущает, так это вариативность слов, которые используются для совершенно разных понятий:

  • box против block
  • containing против container

Является ли block таким же, как box, когда речь идет о визуальном форматировании CSS? Если нет, то в чем разница? Являются ли оба из них чем-то «видимым» на экране?

В общем, как я должен думать, когда вижу block в спецификации? Кроме того, что должно прийти в голову, когда я прочитал box в спецификации?

Некоторые полезные метафоры или аналогии для этих понятий были бы очень полезны для создания ментальной модели.

1 Ответ

3 голосов
/ 22 мая 2019

Давайте начнем с самого начала. CSS почти полностью о коробках. Коробка - это просто прямоугольная область холста. Холст - это все 2D пространство, на котором все нарисовано.

У CSS Boxes есть целый ряд вкусов. Блоки блоков, блоки уровня блоков, встроенные блоки, блоки встроенного уровня, блоки содержимого, поля заполнения, поля границ, поля полей, таблицы, линейные блоки, гибкие блоки и т. Д. Они просто прямоугольные области.

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

Отображение снаружи относится к "* -уровневой" природе ящиков. Они здесь не то, что нам интересно.

Все блоки блоков и некоторые встроенные блоки уровня являются блок-контейнерами. Блок контейнера блока - это блок типа «блок контейнера», а не обязательно блок, содержащий блоки. Блочные контейнеры, которые не являются блоками уровня блока, включают в себя контейнеры display:inline-block и display:table-cell

«Блок» в «контейнере блока» относится к его поведению внутри дисплея. Внутри них располагаются блочные блоки, а текст течет горизонтально, обычно ограниченные его краями прямоугольника.

Таким образом, «блок-контейнер» - это тип типа . Напротив, «содержащий блок» относится к конкретному блоку. Каждый блок, определенный на холсте, содержит ровно один содержащий блок, за одним исключением, называемый исходный содержащий блок , в котором нет содержащего блока.

Только блок типа «блок-контейнер» может быть блоком, содержащим блок.

Время для примера. Предположим, у нас есть HTML ниже: я намеренно собираюсь использовать элементы <span> повсюду, потому что это все о CSS, и я не хочу путать с поведением HTML. 

<span id="level1">
  foo
  <span id="level2">
    bar
    <span id="level3">
      baz
      <span id="level4">
        qux
      </span>
    </span>
  </span>
</span>

CSS очень прост. Just 

#level1 { display:inline-block }

Другими диапазонами являются настройки отображения по умолчанию CSS, «встроенные».

Теперь рассмотрим #level4 span. Его родителем является диапазон # level3, равный display:inline, поэтому диапазон # level3 не образует блок контейнера блока. Аналогично, #level2 span также не образует блок-контейнер. Но элемент #level1 равен display:inline-block. Это формирует блок встроенного уровня, но тот, который является блоком контейнерного блока. (Это то, что означает «встроенный блок»).

Таким образом, содержащий блок для всех встроенных блоков, образованных интервалами #level2, #level3, #level4 и их текстовым содержимым, является блоком контейнерного блока, образованного блоком элемента #level1.

...