Макет и содержащий блок

Размер и позиция элемента часто зависят от его содержащего блока. Чаще всего, содержащий блок — это область содержимого ближайшего блочного предка, но это не всегда так. В этой статье мы рассмотрим факторы, определяющие содержащий блок элемента.

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

Область содержимого
Область отступа
Область границы
Область отступа

Diagram of the box model

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

Влияние содержащего блока

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

Размер и позиция элемента часто зависят от его содержащего блока. Значения в процентах, применяемые к свойствам width, height, padding, margin, и свойствам смещения абсолютно позиционированного элемента (т. е. элемента, у которого свойство position установлено в absolute или fixed), вычисляются относительно содержащего блока элемента.

Определение содержащего блока

Процесс определения содержащего блока полностью зависит от значения свойства position элемента:

Если свойство position имеет значение static, relative, или sticky, содержащий блок формируется краем прямоугольника содержимого ближайшего предкового элемента, являющегося блочным контейнером (например, элементом типа inline-block, block или list-item) или формирует контекст вывода (таким как контейнер таблицы, гибкий контейнер, контейнер сетки или сам блочный контейнер).
Если свойство position имеет значение absolute, содержащий блок формируется краем прямоугольника отступа ближайшего предкового элемента, у которого значение свойства position отличается от static (fixed, absolute, relative, или sticky).
Если свойство position имеет значение fixed, содержащий блок определяется областью просмотра (в случае непрерывных медиа) или областью страницы (в случае страниц).
Если свойство position имеет значение absolute или fixed, содержащий блок также может быть сформирован краем прямоугольника отступа ближайшего предкового элемента, у которого есть одно из следующих:
- Значение свойства filter, backdrop-filter, transform, или perspective отличное от none.
- Значение свойства contain равное layout, paint, strict или content (например, contain: paint;).
- Значение свойства container-type отличное от normal.
- Значение свойства will-change содержащее свойство, для которого не начальное значение формирует содержащий блок (например, filter или transform).
- Значение свойства content-visibility равное auto.

Примечание: Содержащий блок, в котором находится корневой элемент (<html>) называется начальным содержащим блоком. Он имеет размеры области просмотра (для непрерывных медиа) или области страницы (для страниц).

Примечание: Существуют несовпадения в браузерах с perspective и filter , которые вносят вклад в формирование содержащего блока.

Вычисление значений процентов относительно содержащего блока

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

Свойства height, top и bottom вычисляют процентные значения относительно height содержащего блока.
Свойства width, left, right, padding и margin вычисляют процентные значения относительно width содержащего блока.

Примечание: блочный контейнер (например, элемент inline-block, block или list-item) содержит либо только элементы inline, участвующие в контексте вывода inline, либо только элементы block, участвующие в контексте вывода block. Элемент является блочным контейнером только в том случае, если он содержит элементы block или inline.

Примеры

HTML-код для всех примеров:

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>

В каждом примере ниже изменяется только CSS.

Пример 1

В этом примере абзац статически позиционирован, поэтому его содержащий блок — <section>, так как это ближайший предок, являющийся блочным контейнером (из-за display: block).

body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /* == 400px * .5 = 200px */
  height: 25%; /* == 160px * .25 = 40px */
  margin: 5%; /* == 400px * .05 = 20px */
  padding: 5%; /* == 400px * .05 = 20px */
  background: cyan;
}

Пример 2

В этом примере содержащий блок абзаца — элемент <body>, потому что <section> не является блочным контейнером (из-за display: inline), и не формирует контекст вывода.

body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /* == half the body's width */
  height: 200px; /* Note: a percentage would be 0 */
  background: cyan;
}

Пример 3

В этом примере содержащий блок абзаца — <section>, потому что у последнего position имеет значение absolute. Процентные значения абзаца зависят от padding содержащего блока, хотя если у содержащего блока свойство box-sizing имело значение border-box, это не так.

body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
  height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
  margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
  padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
  background: cyan;
}

Пример 4

В этом примере позиция абзаца position имеет значение fixed, поэтому его содержащим блоком является начальный содержащий блок (на экранах — область просмотра). Таким образом, размеры абзаца меняются в зависимости от размера окна браузера.

body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /* == (50vw - (width of vertical scrollbar)) */
  height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
  margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
  padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
  background: cyan;
}

Пример 5

В этом примере позиция абзаца position имеет значение absolute, поэтому его содержащим блоком является <section>, что является ближайшим предком со свойством transform, которое не none.

body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /* == 200px */
  height: 25%; /* == 40px */
  margin: 5%; /* == 20px */
  padding: 5%; /* == 20px */
  background: cyan;
}

END_OF_DOCUMENT_MARKER

См. также

all свойство
contain свойство
aspect-ratio свойство
box-sizing свойство
min-content и max-content значения размера
Модуль: определение размеров элементов в CSS
Модель области
Модуль CSS box model
Режимы разметки
Модели визуального форматирования
Контекст блочной разметки
Контекст наложения
Сжатие отступов
Начальное, вычисленное, использованное и фактическое значения
Заменяемые элементы
Встроенный размер

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block