Расположение элементов на странице

Уверен, когда вы делали задание из первого урока, элементы на странице не слушались, наезжали друг на друга, в общем, не хотели стоять так, как хотелось бы вам.

Для того, чтобы их укротить нам потребуется понимание того, как браузер расставляет эти самые элементы. Хотя бы базовое.

Очевидно, что браузер отображает их сверху вниз, в порядке, который указан в документе (это неправда, но пока сойдёт). Такое поведение понятно, органично. Это принято называть потоком. А вот как они друг рядом с другом располагаться?

Типы html элементов

Начнём с простого:

1. Есть элементы строчные (inline): ссылка, жирный шрифт, наклонный шрифт и очередной «элемент-пустышка» — span. Они выстраиваются относительно остальных элементов — как обычный текст.
   
   Тут также есть «базовая линия», высота текста, отступы, они также переносятся, как и любой другой текст.
2. Есть элементы блочные (block). У них можно указывать ширину, высоту, отступы внутрь и наружу и прочие вещи. Это параграфы, заголовки, div и многие другие. Они ведут себя как «коробки».

По-умолчанию блочные элементы имеют ширину 100% и занимают всю предоставленную ширину, отодвигая остальные дальше по документу.

Хм… А вот у изображений <img> есть ширина и высота, но они всё равно пытаются вести себя как строчные элементы. Да, есть третий тип «гибрид» предыдущих — строчно-блочный (inline-block).

Всё это мы, естественно, можем поменять через css-стили, используя правило display.

Просто текст, в котором тег <b style="display: block">b</b> с display: block.

<h3 style="display: inline-block">Пример заголовка inline-block</h3>

<p style="display: inline">
  Строчный параграф.
</p>

<button style="display: none">Невидимая кнопка</button>

display: none — не отображать элемент, как некоторые уже догадались.

Не советую особо менять это свойство без дела. Лучше использовать подходящие теги. Но понимание того, как ведут относительно друг друга элементы, определённо, помогает верстать.

Плавающие элементы

Окей, вернёмся к тегу <img> — как же его красиво сверстать, чтобы как во всяких «модных» социалках?

Я имею в виду что-то такое:

А не

Воспользуйтесь средствами разработчика — посмотрите чем отличаются стили первого img и второго.

Всё дело во float: left — это css-свойство говорит о том, что элемент помещается слева, а все остальные должны его обтекать.

Поменяйте прямо в инструментах разработчика left на right — посмотрите, что получится. Поведение похоже на text-align, только для блоковых элементов.

Но, если пошёл против потока — сам и выравнивай! Например, может быть такая проблема с float — они наезжают друг на друга, даже когда ты явно указал, что они в разных div. Div то должны отделить inline элементы внутри себя в 2 разные линии друг под другом? Только если те в «потоке».

<div>
  <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 logo
</div>

<div>
  <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 one more logo
</div>

900913 logo

900913 one more logo

Тогда как же нам всё же предотвратить этот беспредел, вернуть поток там, где нам надо? Использовать свойство clear, которое отключит обтекание там, где нам не надо!

Например, так:

<div>
 <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 logo
</div>

<div style="clear: both">
 <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 one more logo
</div>

Или просто вставить «путышку» в месте, где нужен «разрыв».

<div style="clear: both"></div>

— отключит обтекание с обеих сторон.

Позиция элемента

Вот теперь можно уже и рассказать о том, что позиция элемента на странице не обязательно должна соответствовать позиции элемента в html-документе.

Если css-свойство float немного рвало поток — указывая потоку «обтекать» его, то свойство position просто издевается над потоком.

К примеру, элемент, отвечающий за муху в правом-нижнем углу, расположен только здесь. А эта муха достаёт с самого начала и не передвигается. Она зафиксирована относительно окна браузера:

<img src="/media/uploads/2017/08/30/fly.png" style="position: fixed; bottom: 40px; right: 60px; width: 50px;"/>

• position: fixed — задаёт, как позиционировать элемент (fixed — фиксировано на окне).
• bottom: 40px — отступ относительно нижнего края.
• right: 60px — отступ от правого края.

Также есть position: relative — самый грязный способ добиться «а вот эта кнопка должна быть на 2 пикселя левее и на 3 выше» — задаёт позицию относительно текущей.

position: absolute позволяет задать позицию элемента относительно ближайшего родителя с fixed, relative или absolute. Иногда полезно — когда надо прилепить блок к низу родительского.

Домашнее задание:

Переверстать свою страницу div-ы c использованием float, сделать навигационную «шапку» (прилепить к верху окна) на странице, чтобы можно было между разделами удобно переходить.