path: root/files/ru/web/css/containing_block/index.html

---
title: Разметка и содержащий блок
slug: Web/CSS/Containing_block
translation_of: Web/CSS/Containing_block
---
<div>{{cssref}}</div>

<p class="summary" dir="ltr">На размер и позицию элемента часто влияет его <strong>содержащий блок</strong> (containing block). Чаще всего содержащим блоком является content область (<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>) ближайшего блочного (<a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a>) предка, но это не всегда так. <span class="seoSummary">В этой статье мы рассмотрим факторы, которые</span> определяют <span class="seoSummary">содержащий блок элемента.</span></p>

<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p>

<ol dir="ltr" start="1">
 <li>Content область или область контента (content area).</li>
 <li>Padding область или область внутреннего поля (padding area).</li>
 <li>Border область или область границы (border area).</li>
 <li>Margin область или область внешнего поля (margin area).</li>
</ol>

<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>

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

<h2 dir="ltr" id="Эффекты_содержащего_блока">Эффекты содержащего блока</h2>

<p dir="ltr">Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.</p>

<p dir="ltr">На размер и положение элемента часто влияет его содержащий блок. </p>

<p dir="ltr">Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение <code>absolute</code> или <code>fixed</code>) рассчитываются исходя из его содержащего блока.</p>

<h2 dir="ltr" id="Определение_содержащего_блока">Определение содержащего блока</h2>

<p dir="ltr">Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:</p>

<ol dir="ltr" start="1">
 <li>Если свойство <code>position</code> имеет значение  <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задаётся краем <em>content бокса</em> ближайшего предка, который:

  <ul>
   <li>либо является <strong>блочным контейнером</strong> (block container), например, если его свойство display имеет значение inline-block, block или list-item.</li>
   <li>либо <strong>устанавливает контекст форматирования</strong> (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).</li>
  </ul>
 </li>
 <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задаётся краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li>
 <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задаётся:
  <ul>
   <li>в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});</li>
   <li>в случае страничного медиа (paged media) областью страницы.</li>
  </ul>
 </li>
 <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code> или <code><strong>fixed</strong></code>, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
  <ol start="1">
   <li>Свойство {{cssxref("transform")}} или {{cssxref("perspective")}} имеет значение отличное от <code>none</code>.</li>
   <li>Свойство {{cssxref("will-change")}} имеет значение <code>transform</code> или <code>perspective</code>.</li>
   <li>Свойство {{cssxref("filter")}}<strong> </strong> имеет значение отличное от <code>none</code> или <code>will-change</code> value of <code>filter</code> (работает только в Firefox).</li>
   <li>Свойство {{cssxref("contain")}} имеет значение <code>paint</code> (например, <code>contain: paint;</code>).</li>
  </ol>
 </li>
</ol>

<div class="note">
<p dir="ltr"><strong>Примечание: </strong>Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется <strong>начальный содержащий блок</strong>. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).</p>
</div>

<h2 dir="ltr" id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2>

<p dir="ltr">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 <strong>box model properties</strong> and <strong>offset properties</strong>:</p>

<ol dir="ltr" start="1">
 <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code><strong> </strong>of the containing block.</li>
 <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code><strong> </strong>of the containing block.</li>
</ol>

<h2 dir="ltr" id="Some_examples">Some examples</h2>

<p dir="ltr">The HTML code for all our examples is:</p>

<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>

<p dir="ltr">Only the CSS is altered in each instance below.</p>

<h3 id="Example_1">Example 1</h3>

<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p>

<div class="hidden">
<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css" dir="ltr">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;
}
</pre>

<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>

<h3 id="Example_2">Example 2</h3>

<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}}<strong> </strong>element, because <code>&lt;section&gt;</code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p>

<div class="hidden">
<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css" dir="ltr">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;
}
</pre>

<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>

<h3 id="Example_3">Example 3</h3>

<p>In this example, the paragraph's containing block is <code>&lt;section&gt;</code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p>

<div class="hidden">
<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css" dir="ltr">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;
}
</pre>

<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>

<h3 id="Example_4">Example 4</h3>

<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, 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.</p>

<div class="hidden">
<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css" dir="ltr">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;
}
</pre>

<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>

<h3 id="Example_5">Example 5</h3>

<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code>&lt;section&gt;</code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p>

<div class="hidden">
<pre class="brush: html" dir="ltr">&lt;body&gt;
  &lt;section&gt;
    &lt;p&gt;This is a paragraph!&lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;
</pre>
</div>

<pre class="brush: css" dir="ltr">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;
}
</pre>

<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{css_key_concepts}}</li>
 <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li>
</ul>