aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/containing_block/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/containing_block/index.html
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/css/containing_block/index.html')
-rw-r--r--files/ru/web/css/containing_block/index.html271
1 files changed, 271 insertions, 0 deletions
diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html
new file mode 100644
index 0000000000..a441429524
--- /dev/null
+++ b/files/ru/web/css/containing_block/index.html
@@ -0,0 +1,271 @@
+---
+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>Сontent область или область контента (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>