Базовый поток
Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.
| Что нужно знать прежде чем изучать: | Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. |
Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.
Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов.
Как элементы располагаются по умолчанию?
Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.
По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Строчные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на строчные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер строчного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже, display: inline-block;, который смешивает характеристики обоих.).
Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.
Строчные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).
Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.
Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:
<h1>Базовый поток документа</h1>
<p>
Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на
новой строке подо мной.
</p>
<p>
По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так
же высоки, как и наш child-контент. Наша общая ширина и высота - это наш
контент + внутренний отступ (padding) + ширина / высота границы.
</p>
<p>
Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного
из наших полей, а не обоих
</p>
<p>
Строчные элементы <span>такие как этот</span> и <span>этот</span> находятся на
одной линии с другими, и смежным текстом, если есть пространство. Строчные
элементы, что не влезают
<span>переходят на новую строку если это возможно (как этот текст)</span>если
же это невозможно, они переходят на новую строку, как это изображение:
<img src="long.jpg" />
</p>
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;
}