Нормальный поток и блочные элементы

До сих пор вы настраивали, как выглядят элементы: их цвета, шрифты и блоки. На этом уроке вы узнаете, как браузер решает, куда поставить элементы на странице, и как это изменить с помощью свойств display и position.

Если не указать иное, браузер размещает элементы на странице друг за другом, в том же порядке, что и в HTML. Это называется нормальным потоком. В нормальном потоке элементы ведут себя двумя основными способами:

• Блочные элементы начинаются с новой строки и располагаются сверху вниз. Если не задать им ширину, они занимают всю ширину родителя. Блочные элементы — это заголовки, абзацы, div, ul, li, nav, main и section.
• Строчные элементы стоят в строке текста один за другим слева направо, как слова. Когда строка заканчивается, они переходят на следующую. Примеры: strong, em, ссылки (a) и изображения (img).

Блочный или строчный элемент — решает свойство display. У каждого элемента есть значение по умолчанию: у абзацев это block, у strong — inline. В правиле его можно изменить, например:

strong {
	display: block;
}

С этим правилом каждый элемент strong начинался бы с новой строки и был бы так же широк, как его родитель, — совсем как абзац.

В редакторе — страница о кошке с новой таблицей стилей, в которой есть только то, что вы уже знаете. Сверху мы добавили навигацию: список ссылок на разделы страницы. В первом абзаце — фотография кошек.