Итоги

На этом уроке вы узнали, как браузер размещает элементы на странице и как это изменить. Теперь вы знаете, что:

• Если ничего не менять, элементы размещаются в нормальном потоке: один за другим, в том порядке, в каком они идут в HTML.
• Блочные элементы (display: block), такие как заголовки, абзацы и div, начинаются с новой строки и занимают всю ширину родителя. Если у них задана ширина, их можно отцентрировать с помощью margin: 0 auto.
• Строчные элементы (display: inline), такие как strong, a и span, стоят в строке текста, как слова. Они игнорируют width, height и верхний и нижний внешние отступы (изображения — исключение).
• Строчно-блочные элементы (display: inline-block) выстраиваются в ряд, как строчные, но размеры им можно задавать, как блокам. Как и текст, они выравниваются с помощью text-align у родителя.
• display: none скрывает элемент, и он не занимает места. С помощью :hover его можно показывать, только пока указатель мыши находится над другим элементом.
• По умолчанию position равно static: элемент остаётся там, куда его ставит нормальный поток.
• Смещения top, right, bottom и left двигают элементы, у которых позиционирование отлично от static. Отрицательные значения двигают их в другую сторону.
• position: relative сдвигает элемент с исходного места, которое остаётся за ним закреплённым.
• position: absolute выводит элемент из нормального потока. Его смещения отсчитываются от ближайшего предка с позиционированием, отличным от static, а если такого нет — от первого экрана страницы. Чаще всего его помещают внутрь родителя с position: relative.
• position: fixed работает как абсолютное позиционирование, но смещения отсчитываются от окна браузера, поэтому элемент не двигается при прокрутке.
• position: sticky оставляет элемент в нормальном потоке, пока прокрутка не унесла бы его за границу, заданную смещением. Тогда он прилипает к этому краю, но только пока его родитель виден на экране.
• z-index решает, какой из перекрывающихся элементов с позиционированием окажется сверху: побеждает большее значение.

Наши карточки пород теперь стоят в ряд, но inline-block даёт над ними мало контроля: мы не можем легко равномерно распределить их по ряду или сделать их одинаковой высоты. На следующем уроке, Flexbox, вы узнаете главный инструмент для расположения элементов рядом друг с другом.