1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
---
title: <display-outside>
slug: Web/CSS/display-outside
tags:
- CSS
- CSS Data Type
- CSS Display
- Reference
- display-outside
- Справка
translation_of: Web/CSS/display-outside
---
<div>{{CSSRef}}</div>
<p class="summary">Ключевые слова <code><display-outside></code> определяют внешний тип отображения элемента (outer {{CSSxRef("display")}} type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства <code>display</code> и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из {{CSSxRef("<display-inside>")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<p>Значение <code><display-outside></code> определяется с использованием ключевого слова из списка ниже:</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>block</code></dt>
<dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd>
<dt><code>inline</code></dt>
<dd>Элемент создаёт один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd>
<dt><code>run-in</code> {{Experimental_Inline}}</dt>
<dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как <code>display: run-in, тогда</code> бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br>
<br>
Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd>
</dl>
<div class="note">
<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code> установят внутреннее значение как <code>flow</code>. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p>
</div>
<h2 id="Пример">Пример</h2>
<p>В следующем примере элементы span (обычно отображаемые как строковые элементы) устанавливаются в <code> display: block и поэтому разбиваются на новые строки и расширяются, чтобы заполнить их контейнер в строковом измерении.</code></p>
<h3 id="HTML"><code>HTML</code></h3>
<pre class="brush: html"><code>
<span>span 1</span>
<span>span 2</span></code></pre>
<h3 id="CSS"><code>CSS</code></h3>
<pre class="brush: css"><code>
span {
display: block;
border: 1px solid rebeccapurple;
}</code></pre>
<h3 id="Result"><code>Result</code></h3>
<p><code>{{EmbedLiveSample("Example", 300, 60)}}</code></p>
<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
<h3 id="Support_of_run-in"><code>Support of <code>run-in</code></code></h3>
<p><code>{{Compat("css.properties.display.run-in", 10)}}</code></p>
<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
<ul>
<li><code>{{CSSxRef("display")}}</code></li>
<li><code>{{CSSxRef("<display-inside>")}}</code></li>
<li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></code></li>
<li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a> </code></li>
</ul>
|
