Разметка и содержащий блок
==========================

На размер и позицию элемента часто влияет его **содержащий блок** (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.

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

1. Content область или область контента (content area).
2. Padding область или область внутреннего поля (padding area).
3. Border область или область границы (border area).
4. Margin область или область внешнего поля (margin area).

![Diagram of the box model](/ru/docs/Web/CSS/Containing_block/box-model.png)

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

Эффекты содержащего блока
-------------------------

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

На размер и положение элемента часто влияет его содержащий блок.

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

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

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

1. Если свойство `position` имеет значение **`static`**, **`relative`**, или **`sticky`**, то содержащий блок задаётся краем *content бокса* ближайшего предка, который:
    * либо является **блочным контейнером** (block container), например, если его свойство display имеет значение inline-block, block или list-item.
    * либо **устанавливает контекст форматирования** (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
2. Если свойство **`position`** имеет значение **`absolute`**, то содержащий блок задаётся краем *padding бокса* ближайшего предка, у которого свойство **`position`** имеет значение отличное от `static` (`fixed`, `absolute`, `relative` или `sticky`).
3. Если свойство **`position`** имеет значение **`fixed`**, то содержащий блок задаётся:
    * в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - viewport);
    * в случае страничного медиа (paged media) областью страницы.
4. Если свойство **`position`** имеет значение **`absolute`** или **`fixed`**, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
    1. Свойство `transform` или `perspective` имеет значение отличное от `none`.
    2. Свойство `will-change` имеет значение `transform` или `perspective`.
    3. Свойство `filter` имеет значение отличное от `none` или `will-change` value of `filter` (работает только в Firefox).
    4. Свойство `contain` (en-US) имеет значение `paint` (например, `contain: paint;`).

> 
> \*\*Примечание:\*\*Содержащий блок в котором находится корневой элемент (`<html>`) представляет собой прямоугольник, который называется **начальный содержащий блок**. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).
> 
> 
> 

Calculating percentage values from the containing block
-------------------------------------------------------

As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are **box model properties** and **offset properties**:

1. The `height`, `top`, and `bottom` properties compute percentage values from the `height` of the containing block.
2. The `width`, `left` (en-US), `right`, `padding`, and `margin` properties compute percentage values from the `width` of the containing block.
Some examples
-------------

The HTML code for all our examples is:


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


Only the CSS is altered in each instance below.

### Example 1

In this example, the paragraph is statically positioned, so its containing block is `<section>` because it's the nearest ancestor that is a block container.
```

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



```css
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;
}
```

### Example 2

In this example, the paragraph's containing block is the `<body>` element, because `<section>` is not a block container (because of `display: inline`) and doesn't establish a formatting context.
```

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



```css
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;
}
```

### Example 3

In this example, the paragraph's containing block is `<section>` because the latter's `position` is `absolute`. The paragraph's percentage values are affected by the `padding` of its containing block, though if the containing block's `box-sizing` value were `border-box` this would not be the case.
```

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



```css
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;
}
```

### Example 4

In this example, the paragraph's `position` is `fixed`, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
```

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



```css
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;
}
```

### Example 5

In this example, the paragraph's `position` is `absolute`, so its containing block is `<section>`, which is the nearest ancestor with a `transform` property that isn't `none`.
```

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



```css
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;
}
```

Смотрите также
--------------

* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* The `all` property resets all CSS declarations to a given known state