В этой лекции будут подробно рассмотрены важные вопросы, связанные с тем, как можно управлять позицией элементов на странице. Также здесь можно узнать, из каких параметров складываются итоговые размеры элемента на странице, и когда привычные правила перестают работать.
Рекомендуется перед прочтением повторить основы HTML, а именно: вспомнить, какие элементы называются блочными, а какие – строчными. Также для понимания текста необходимо иметь базовое представление о синтаксисе CSS.
Поток — одно из важнейших базовых понятий в вёрстке. Это принцип организации элементов на странице при отсутствии стилей. Если мы просто напишем HTML из нескольких тегов и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке.
Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам мы видим заголовок <h1> крупнее заголовка <h2>, а ссылки — синими и подчёркнутыми. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например, <div> будет блочным, а <span> или <a> — строчным. Поменять стандартное поведение можно при помощи CSS-свойства display.
Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.
Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования.
Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования.
Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка. Например, тексты на европейских языках мы читаем и пишем слева направо сверху вниз. Это означает, что по умолчанию контекст форматирования располагает блочные элементы сверху вниз, а строчные — слева направо. Но если рассмотреть японский язык, мы видим совершенно другую картину: блочные элементы будут располагаться слева направо, а строчные — сверху вниз.
Во всех примерах далее будет рассматриваться направление письма, характерное для европейских языков: слова — слева направо, блоки — сверху вниз. Но все те же объяснения можно применять и для другого направления письма.
Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого. Три абзаца, идущие друг за другом в HTML, будут располагаться точно в таком же порядке и на странице.
https://codepen.io/ezhkov/pen/poNYXmm
Если ширина блочного элемента явно задана и позволяет разместить справа ещё один такой элемент, то поток всё равно продолжит выстраивать их друг под другом.