Структуру выбирают по назначению
Уровень заголовка отражает положение раздела, а не желаемый размер шрифта. Ссылка ведёт к другому месту, кнопка запускает действие. Использование подходящего элемента помогает браузеру и вспомогательным технологиям понимать страницу. Поэтому сначала полезно составить документ без сложного оформления: определить основной заголовок, разделы, списки и управление. Если смысловая последовательность понятна в таком виде, визуальное оформление получает устойчивую основу. Декоративный контейнер не должен заменять все типы элементов подряд.
Размер блока складывается из частей
В блочной модели различают содержимое, внутренние отступы, границу и внешние отступы. При стандартном расчёте заданная ширина относится к содержимому, а внутренние отступы и граница увеличивают видимый размер. Режим border-box включает их в заданную ширину. Внешние отступы остаются отдельным пространством между блоками. Такое различие объясняет, почему два элемента с одинаковой указанной шириной иногда занимают разное место. Перед исправлением переполнения нужно понять, какая часть размера создаёт проблему.
Макет должен реагировать на содержание
Фиксированная высота карточки может подходить короткому заголовку и обрезать длинный. Жёсткая ширина нескольких колонок способна вызвать горизонтальную прокрутку на узком экране. Полезно задавать ограничения, которые учитывают доступное пространство и естественный размер текста. Изменение расположения блоков при другой ширине должно сохранять понятный порядок чтения. Визуальная перестановка не должна делать навигацию с клавиатуры неожиданной. Проверка одного красивого примера недостаточна для устойчивого компонента.
Отладка начинается с наблюдаемой причины
Если блок выходит за контейнер, полезно посмотреть его вычисленные размеры, отступы и правила, которые реально применились. Несколько перекрывающих друг друга исправлений могут скрыть исходную ошибку. Для проверки используют короткий и длинный текст, узкую и широкую область, увеличенный масштаб. Отдельно рассматривают видимость фокуса и понятность подписей. Успешная компоновка должна сохранять доступ к содержимому, а не просто прятать всё, что не поместилось.
Попробуйте на практике
Рассчитайте и проверьте бумажный макет двух карточек.
- Задайте ширину содержимого карточки двести пикселей, внутренние отступы по двадцать и границу по два с каждой стороны. Посчитайте внешний размер без внешних отступов.
- Повторите расчёт для border-box при общей заданной ширине двести пикселей. Найдите ширину области содержимого.
- Нарисуйте две карточки в контейнере и добавьте короткий и длинный заголовки. Отметьте, где фиксированная высота создаст проблему.
- Составьте список смысловых элементов карточки и проверок на узкой ширине, не используя оформление как замену правильной структуре.
Как проверить результат. В стандартной модели размер равен двумстам сорока четырём пикселям; при border-box содержимое занимает сто пятьдесят шесть. Длинный текст не скрывается ради сохранения рисунка.
Частые вопросы
Можно ли выбирать уровень заголовка только по внешнему виду?
Нет. Уровень связан со структурой документа. Размер и другие визуальные свойства задаются оформлением.
Исправляет ли border-box все проблемы макета?
Нет. Он делает определённый расчёт размеров удобнее, но не решает автоматически переполнение текста, ограничения контейнера и порядок элементов.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.