diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/containing_block/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-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.html | 271 |
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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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><section></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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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><section></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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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><section></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"><body> + <section> + <p>This is a paragraph!</p> + </section> +</body> +</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> |