files/ru/learn/css/css_layout/нормальный_поток/index.html


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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

---
title: Базовый поток
slug: Learn/CSS/CSS_layout/Нормальный_поток
tags:
  - float
  - grid
translation_of: Learn/CSS/CSS_layout/Normal_Flow
---
<div>{{LearnSidebar}}</div>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>

<p class="summary">Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Что нужно знать прежде чем изучать:</th>
   <td>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и понимания как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.</td>
  </tr>
 </tbody>
</table>

<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p>

<p>Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. </p>

<h2 id="Как_элементы_располагаются_по_умолчанию">Как элементы располагаются по умолчанию?</h2>

<p>Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.</p>

<p>По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи <code>display: block;</code> (или даже,  <code>display: inline-block;</code>, который смешивает характеристики обоих.).</p>

<p>Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p>

<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p>

<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p>

<p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p>

<div id="Normal_Flow">
<pre class="brush: html notranslate">&lt;h1&gt;Базовый поток документа&lt;/h1&gt;

&lt;p&gt;Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.&lt;/p&gt;

&lt;p&gt;По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.&lt;/p&gt;

&lt;p&gt;Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих&lt;/p&gt;

&lt;p&gt;Встроенные элементы &lt;span&gt;такие как этот&lt;/span&gt; и &lt;span&gt;этот&lt;/span&gt; находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают &lt;span&gt;переходять на новую строку если это возможно (как этот текст)&lt;/span&gt;если же это невозможно, они переходят на новую строку, как это изображение: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}</pre>
</div>

<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>

<h2 id="Заключение">Заключение</h2>

<p>Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.</p>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Базовый поток</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Сетка(Grid)</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Потоки (Floats)">Поплавки</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование(Positioning)</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Методы устаревших макетов</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальная оценка понимания макета</a></li>
</ul>