• Теория
  • Теория

Боксовая модель

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

В тренажёре «Знакомство с HTML и CSS» мы познакомились со многими тегами. Каждому из этих тегов на странице соответствует прямоугольная область, которая называется боксом (от английского box — «коробка»).

Бокс состоит из содержимого (content), внутренних отступов (padding), рамки (border) и внешних отступов (margin):

Схема бокса

То, как бокс выглядит на странице, во многом зависит от его типа (или от типа его родителя). С боксами двух типов — блочными и строчными — мы уже работали в тренажёре «Знакомство с HTML и CSS», хоть и не упоминали их типы.

Блочные боксы на странице начинаются с новой строки и растягиваются на всю ширину родительского элемента. Блочный тип по умолчанию имеют, например, теги <p>, <div> и <h1>.

Заголовок

Абзац

Строчные боксы располагаются друг за другом на одной строке, а их ширина зависит от их содержимого. По умолчанию строчными боксами являются, например, теги <a>, <span> и <b>.

Ссылка Произвольная строка текста Текст, выделенный полужирным

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.