Для того чтобы эффективно взаимодействовать с верстальщиком необходимо понимать основные принципы html/css-верстки.  В этой статье я расскажу о самых базовых понятиях и постараюсь объяснить что из себя представляют элементы на странице и как они могут себя вести.

Блочность

Каким бы не был элемент, это всегда по итогу блок. Блок может быть как размерами 0х0 так и любой другой величины. Круглых, треугольных, ромбовидных и любых других элементов не бывает. Есть возможность с помощью css сделать некое подобие треугольника, круга, ромба или еще чего-то, однако это все является скорее «трюками», нежели нормальным поведением.

Есть возможность поместить в блок картинку любой формы, однако элемент от этого не примет форму картинки, а останется таким же блоком, внутри которого она будет вписана.

Вложенность

Каждый элемент может быть вложен в другой элемент. Самым первым (родительским) элементом является html, в него вложен элемент body, а уже в body располагаются все остальные элементы с неограниченным количеством вложенности. Вложенность довольно просто понять, если представить себе матрешку или коробочку, в которую можно положить много других коробочек поменьше, а в них еще положить коробочек поменьше и так далее.

Каждый элемент по умолчанию позиционируется относительно своего родителя (элемента, который находится выше его по иерархии вложенности или, другими словами, элемента, в который он вложен).

Шаблонность

CSS-свойства элементам указываются по наименованиям тэгов (tag), классам (.class) и идентификаторам (#id). Таким образом как правило мы задаем определенные свойства целым группам элементов. Например этими элементами могут быть все ссылки, если прописать некоторые свойства тэгу a. Или это могут быть все элементы с классом .some_class. Id является тут исключением, так как по правилам на странице не может быть несколько элементов с одинаковым id, однако верстальщики практически не используют идентификаторы, так как это считается плохим тоном.

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

Display (Отображение)

Отображение элемента задается с помощью css-свойства display.

Вид элемента может быть нескольких типов. Это может быть блок (block), текстовый элемент (inline), текстово-блочный элемент (inline-block), таблица (table), строка таблицы (table-row), ячейка таблицы (table-cell), флекс (flex, inline-flex) и несколько других значений, которые мы не будем здесь рассматривать за ненадобностью. Примеры записи: display: table или display: inline-block.

Block (Блок)

По умолчанию блок занимает всю ширину родительского элемента, но высота у него 0, если в нем нет никакого контента или других элементов с высотой больше 0. Такие блочные элементы как p (абзац), h1-h6 (заголовок) имеют так же внешние отступы (margin) сверху и снизу.

Следующие за блоком элементы располагаются строго снизу, сразу после него.

Inline (Текстовый элемент)

Текстовый элемент по умолчанию имеет ширину и высоту вложенного в него контента (текста или изображений) или, если контента в нем нет, то ширина и высота будут равны 0.

Текстовые элементы следуют друг за другом слева направо. Любой текст так же является текстовым элементом.

Самые известные текстовые элементы: a (ссылка), span (текстовый контейнер), i (курсив), b (жирный), u (подчеркнутый), а так же img (картинка).

Inline-block (Текстово-блочный элемент)

Гибрид блока и текстового элемента. Ведет себя как отдельный символ в строке. Текстово-блочные элементы располагаются слева направо и имеют ширину и высоту своего содержимого.

Table (Таблица)

По умолчанию таблица имеет ширину ее ячеек и высоту ее строк. Ее строки (rows) располагаются строго внутри таблицы и идут только сверху вниз. Ячейки таблицы размещаются строго внутри ее строк и идут только слева направо.

Браузер сам определяет ширину ячеек в зависимости от контента расположенного в них. Так же ячейкам и самой таблице можно задать определенную ширину.

Flex (Флексы)

Отдельная система позиционирования, введенная относительно недавно в css и на данный момент мало где используемая ввиду того, что не поддерживается старыми версиями браузеров.

Смысл флекс-боксов в том, чтобы максимально умно позиционировать элементы внутри их родителя. Элементы можно выравнивать по горизонтали и вертикали множеством способов, задавать им различное поведение и размеры.

Мы не будем опираться на эту систему, потому что по сути это уже детали и дизайнерам не обязательно знать про все это.

Поток

Потоком называется порядок элементов на странице. По умолчанию все элементы располагаются снизу вверх и слева направо в зависимости от их отображения. Если в html-коде один элемент (тэг) следует за другим, то точно так же они и будут отображены на странице. Однако существует множество способов вырвать элемент из потока и расположить где угодно. Соответственно, иногда и соответствующий данному элементу тэг в html-коде можно расположить в другом месте.

Позиционирование

Позиционирование задается css-свойством position. Например position: relative. Оно бывает следующих типов: static (по умолчанию), relative (относительное), absolute (абсолютное) и fixed (фиксированное). С его помощью мы указываем элементу как именно он будет себя вести по отношению к потоку.

Static (По умолчанию)

По умолчанию все элементы позиционированы как static. Такие элементы следуют правилам потока. Если это блочный элемент, то он занимает всю ширину и следующие элементы располагаются под ним, а предыдущие над ним. Если это текстовый или текстово-блочный элемент, то следующие текстовые или текстово-блочные элементы располагаются рядом и идут слева направо.

Relative (относительное)

Относительное позиционирование показывает, что элемент теперь может сдвигаться относительно своего родителя на некоторое расстояние в любую из 4х сторон (с помощью свойств top и left). Так же, если данный элемент содержит в себе элементы с абсолютным позиционированием, то он становится для них «точкой отсчета» и их расположение становится относительным данного элемента.

Absolute (абсолютное)

Такой элемент вырывается из потока и может быть расположен где угодно на странице. Ему можно задать любые отступы или выровнять по центру. Выравнивается он относительно ближайшего родителя с заданным позиционированием (кроме static, которое идет по умолчанию) или, если такого нет, то относительно body.

Ярким примером абсолютного позиционирования является так называемое «модальное окно», которое возникает по центру экрана. Обычно туда выводятся какие-нибудь важные сообщения пользователю или фотографии (как вконтакте).

Fixed (фиксированное)

Это позиционирование отличается от абсолютного только тем, что для него есть только одна «точка отсчета» — это границы экрана. Такой элемент выравнивается и позиционируется только относительно границ видимой части страницы.

Ярким примером фиксированного позиционирования являются различные как бы «прилепленные» к краям экрана кнопки «перезвоните мне», чаты со специалистами, стрелки «наверх» и многое другое, что должно быть всегда на виду у пользователя с точки зрения создателя сайта.

Float (обтекание)

Отдельно следует упомянуть свойство float, которое так же вырывает элемент из потока. Элемент, которому указано float: right или float: left, выравнивается по правому или левому краю соответственно. При этом все соседние элементы, которым позволяет ширина, как бы «обтекают» его с противоположной стороны. Ярким примером может являться картинка, выровненная по одному из краев и текст, ее обтекающий.

Обтекание часто используется, чтобы расположить в ряд несколько блочных элементов. Для такого же эффекта можно использовать на необходимых элементах display: inline-block.

Как используется

Из всего этого дизайнеру нужно понять прежде всего следующее:

  • Каждый элемент должен опираться на что-то. На своего родителя, соседние элементы, «точку отсчета», а если этого всего нет, то на элемент body (вся страница) или на границы экрана в случае с фиксированным позиционированием.
  • Элементы не расположены на странице «как угодно». Они имеют четкую структуру и иерархию. Такой же иерархии желательно придерживаться в макете. Создавать больше вложенных друг в друга групп, например, header — hat — menu — submenu.
  • Каждый элемент — это блок. Учитывайте это. Верстальщик может сделать простую геометрическую фигуру с помощью «css-трюков», однако все остальное будет использоваться в виде картинок, предварительно вырезанных из вашего макета.
  • Элементы в основном ведут себя как блоки (располагаются один под другим) или как текст (располагаются в ряд). Отдельным разговором является «табличная верстка», так как таблицы ведут себя немного иначе, но о ней я расскажу в другой статье. В верстке сайтов таблицы как правило используются как таблицы и не более.
  • Следует понимать, что верстальщики прописывают свойства не каждому элементу в отдельности, а сразу целым группам элементов. Поэтому стоит учитывать данный аспект при создании макета и делать элементы из определенного множества максимально одинаковыми. Например, на сайте есть всего 3 типа кнопок. 2 из них располагаются справа под текстом и имеют ширину надписи + внутренние отступы. А 1 тип — это кнопка на всю ширину блока с текстом по центру. Такая практика является очень хорошим тоном. Можно наплодить и больше разновидностей кнопок, однако чем их больше, тем больше путаницы они вносят и тем больше головной боли у верстальщика. Все конечно сильно зависит от проекта, однако всегда помните об этом принципе и не плодите сущностей без особой надобности.