Блочная верстка

Блочная верстка — это относительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float, а основным строительным элементов веб-страниц является элемент div, то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.

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

Знакомые вам div, section, header, h1–h6 и p, располагаясь в потоке, по умолчанию занимают всю ширину своего родителя. Такие элементы называются блочными.

Проблемы

Инструменты вёрстки были придуманы для книг и журналов. Размеры бумажных страниц не меняются, а сетка — структура страницы — остаётся фиксированной. Поэтому задача бумажной вёрстки — аккуратно расположить текст и изображения на листе, чтобы текст обтекал картинки. Так появилось свойство float.

Но при создании сайтов столкнулись с рядом проблем:

• при изменении размеров страницы блоки съезжали, а текст обрезался

• стали задавать display: inline-block, но столкнулись с другой проблемой — пробелами между блоками. Начали применять другие костыли

В итоге, стало так много костылей, что пересмотрели принципы верстки и пришли к Flexbox верстке.

Свойства CSS в основе подхода

float

В общем, страницу легче делить на блоки с помощью div.

Свойство float прижимает блок к одной из сторон родительского блока:

div {
    float: right;  // прижать вправо элемент
}

display

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

doc: https://developer.mozilla.org/ru/docs/Web/CSS/display

Это свойство может принимать следующие значения:

• inline: элемент становится строчным, подобно словам в строке текста

• block: элемент становится блочным, как параграф

• inline-block: элемент располагается как строка текста

• list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

• run-in: тип блока элемента зависит от окружающих элементов

• flex: позволяет осуществлять гибкое позиционирование элементов. Означает, будет ли растягиваться элемент на все доступное пространство

• table, inline-table: позволяет расположить элементы в виде таблицы

• none: элемент не виден и удален из разметки html

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

inline-block — представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height, margin.

position

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице

Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать одно из следующих значений:

• static: стандартное позиционирование элемента, значение по умолчанию

• absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

• relative: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов

• fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).