# Блочная верстка Блочная верстка — это относительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется 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** (то есть тип по умолчанию). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/css/verstka/blochnaya-verstka.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.