§ 1. Вёрстка с помощью блоков

Определения и обозначения

Блочная вёрстка — способ размещения содержимого веб-страницы с помощью прямоугольных областей, размеры и положение которых задаются стилями. Такой подход позволяет разделить страницу на части, например на меню и основное содержимое. Каждую часть можно оформлять независимо, не перестраивая всю страницу.

Блок — область страницы, которой можно задать размеры, отступы, границу и другие свойства оформления. В роли блока обычно выступает HTML-элемент, например область с текстом или изображением. Это понятие помогает понять, к какому элементу относятся заданные правила CSS.

Контейнер — блок, внутри которого располагаются другие блоки и содержимое страницы. Он объединяет связанные элементы и позволяет управлять ими как общей частью макета. Например, общий контейнер может ограничивать ширину всех областей страницы.

Внутренний и внешний отступы — пространство соответственно между содержимым и границей блока и между блоком и соседними элементами. В CSS внутренний отступ задаёт padding, а внешний — margin. Они нужны, чтобы содержимое не прилегало к границе, а отдельные области не соприкасались без промежутка.

Как это устроено

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

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

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

Размеры, границы и отступы вместе определяют, сколько места занимает область и насколько близко к ней расположено содержимое. Свойства width и height задают размеры, border добавляет линию по краю, а padding оставляет промежуток внутри границы. Свойство margin отделяет блок от соседей, поэтому оно влияет на расстояние между областями. Если учитывать только width, но забыть о границе и padding, фактическое место блока может оказаться больше ожидаемого.

Чтобы получить нужный макет, мало задать отдельным областям размеры: нужно ещё определить способ их размещения. Одни свойства CSS помогают выстроить блоки в строку, другие — расположить их относительно контейнера или друг друга. Выбор зависит от задачи: например, нужно ли поставить меню рядом с текстом или расположить области одна под другой. После настройки стоит проверить результат в браузере, потому что на расположение влияет сочетание всех размеров и правил.

Основные свойства блока

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

Разбор задач

Задача 1. Создать блок заданной ширины и высоты и оформить его границу. Сначала нужно определить, какой HTML-элемент будет областью, а затем назначить ему CSS-правила. Пусть элементу нужно задать ширину 300 пикселей, высоту 150 пикселей и сплошную границу. Решение можно записать так:

1. Добавить в HTML элемент, например div, который будет представлять область.
2. В CSS выбрать этот элемент и задать width: 300px; и height: 150px;.
3. Добавить border: 1px solid black;, чтобы вокруг области появилась сплошная чёрная линия толщиной 1 пиксель.

Ответ: HTML задаёт сам элемент, а CSS-правила назначают ему размеры и границу. Проверить результат можно в браузере: на странице должен появиться прямоугольник с заданными параметрами.

Задача 2. Разместить два блока рядом, оставив между ними расстояние. Здесь важно различить промежуток внутри каждого блока и расстояние между блоками. Для промежутка между соседними областями используют margin, а padding оставляют для пространства от содержимого до границы. Например, можно задать блокам размещение в строку и внешний отступ справа у первого блока.

1. Проверить ширину родительского контейнера и ширину каждого блока: вместе они должны помещаться внутри.
2. Выбрать подходящее CSS-размещение, которое выстраивает блоки рядом, и назначить его родительской области.
3. Задать первому блоку margin-right: 20px;, если нужно оставить между областями промежуток в 20 пикселей.
4. Открыть страницу в браузере и убедиться, что блоки стоят рядом, а промежуток имеет нужный размер.

Ответ: блоки размещены в одной строке, а расстояние между ними задано внешним отступом. Если промежуток оказался не там, следует проверить, к какому элементу применён margin.

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

1. Создать внешний контейнер для всех частей макета.
2. Поместить в него отдельный блок заголовка и ещё один контейнер для боковой области и основного содержимого.
3. Внутри второго контейнера создать два блока: для боковой области и для основного текста.
4. Настроить размеры и способ размещения двух внутренних блоков, затем проверить, помещаются ли они по ширине.
5. Открыть страницу в браузере и при необходимости изменить размеры или отступы отдельных областей.

Ответ: общий контейнер объединяет макет, а вложенные блоки задают его части. Если одна область смещена или выходит за пределы контейнера, нужно выяснить, какой именно блок получил неподходящие размеры или отступы.

Типичные ошибки

Путать внутренний и внешний отступы. Ошибка возникает, когда оба свойства воспринимают просто как пустое место. Но padding отделяет содержимое от границы, а margin отделяет сам блок от соседей. Проверьте себя: если текст отодвигается от края своего блока, нужен внутренний отступ; если нужно раздвинуть два блока — внешний.

Не учитывать границу и внутренние отступы при расчёте места. Иногда смотрят только на width и предполагают, что блок займёт ровно столько места. Граница и padding тоже могут увеличить занимаемую площадь, из-за чего соседние области перестают помещаться. Проверьте сумму ширин, границ и внутренних отступов и сравните её с шириной контейнера.

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

Не проверять результат в браузере. Даже верно записанные свойства могут дать неожиданный макет, если их сочетание не подходит размерам блоков. Часто предполагают, что каждый параметр действует независимо, и не замечают нехватку места или лишний отступ. Проверяйте страницу после изменений и сопоставляйте результат с размерами контейнера и вложенных областей.

Связь с другими темами

Для работы с блочной вёрсткой нужно знать основы HTML-разметки и понимать, что CSS-стили управляют внешним видом элементов. Здесь используются понятия HTML-элемента, атрибута и вложенности: они помогают выбрать нужную часть страницы и разобраться в её структуре. Эти знания пригодятся при создании веб-страниц, а также при дальнейшем изучении CSS и адаптивной вёрстки. Адаптивная вёрстка помогает подстраивать расположение областей под разные размеры экрана.

Что запомнить

• Блочная вёрстка строит страницу из отдельных областей.
• HTML задаёт структуру блоков, а CSS управляет их оформлением и размещением.
• Контейнер может объединять несколько вложенных блоков.
• Ширина и высота задают размеры блока.
• Внутренний отступ отделяет содержимое от границы.
• Внешний отступ задаёт расстояние до соседних элементов.