> For the complete documentation index, see [llms.txt](https://appsecurity.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/css/verstka/blochnaya-verstka.md). # Блочная верстка Блочная верстка — это относительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство `float`, а основным строительным элементов веб-страниц является элемент `div`, то есть по сути блок. Используя свойство `float` и элементы `div` или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче. Порядок расположения элементов на странице называют **потоком**. Браузер читает код файла сверху вниз и так же отрисовывает страницу. Поэтому говорят, что элементы следуют друг за другом в потоке. Знакомые вам `div`, `section`, `header`, `h1–h6` и `p`, располагаясь в потоке, по умолчанию занимают всю ширину своего родителя. Такие элементы называются **блочными**. ## Проблемы Инструменты вёрстки были придуманы для книг и журналов. Размеры бумажных страниц не меняются, а сетка — структура страницы — остаётся фиксированной. Поэтому задача бумажной вёрстки — аккуратно расположить текст и изображения на листе, чтобы текст обтекал картинки. Так появилось свойство `float`. Но при создании сайтов столкнулись с рядом проблем: * при изменении размеров страницы блоки съезжали, а текст обрезался * стали задавать display: inline-block, но столкнулись с другой проблемой — пробелами между блоками. Начали применять другие костыли В итоге, стало так много костылей, что пересмотрели принципы верстки и пришли к Flexbox верстке. ## Свойства CSS в основе подхода ### float В общем, страницу легче делить на блоки с помощью div. Свойство float прижимает блок к одной из сторон родительского блока: ```css div { float: right; // прижать вправо элемент } ``` ### display Определяет как ведет себя контейнер в родительском компоненте и как ведут себя дочерние компоненты. Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов. doc: Это свойство может принимать следующие значения: * `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** (то есть тип по умолчанию).