Глава 8 · Урок 1 из 1
Нормальный поток
Нормальный поток в CSS — раскладка по умолчанию: блочные элементы идут друг под другом, строчные встают в строку и переносятся вместе с текстом.
Черновик
Страница ещё пишется: текст может быть неполным и не проверенным.
Цель урока
Понять, как браузер раскладывает элементы без стилей раскладки, и научиться предсказывать результат до того, как вы его поменяете.
Блочные и строчные элементы
«Нормальный поток» — это раскладка по умолчанию. Каждый элемент порождает блок, а тип блока задаёт свойство display. Абзацы, заголовки и div — блочные: они начинаются с новой строки и занимают всю ширину. Ссылки, strong и span — строчные: они встают в строку текста.
<p>Абзац — блочный элемент.</p>
<p>В нём <strong>строчный</strong> и <em>ещё один</em>.</p>
<div>Блок начинается с новой строки.</div>p,
div {
outline: 1px dashed;
}Результат
Направление потока
Блоки выстраиваются по блочной оси, строчные элементы — по строчной. В русском тексте это «сверху вниз» и «слева направо»…
Что запомнить
- Нормальный поток — раскладка по умолчанию, без флексов и сеток.
- Блочные элементы идут друг под другом и занимают всю ширину.
- Строчные элементы встают в строку и переносятся вместе с текстом.
- Направление потока зависит от режима письма — отсюда логические свойства.