Уроки 64 - 65
Блоки. Блочная верстка
(§30. Блоки)

Содержание урока

Что такое блоки?

Пример: плавающие блоки

Вопросы и задания

Задача

Что такое блоки?

Блок — это контейнер, который задаётся тэгом <div> (от англ. division — раздел, подразделение). Он может содержать всё, что угодно — абзацы, ссылки, рисунки, таблицы, другие (вложенные) блоки и т. д.

На экране блок изображается как прямоугольник, который имеет три характерных свойства (рис. 4.21):

• границу или рамку (англ. border);
• внешние поля (англ. margin) — пространство между блоком и окружающими его элементами;
• внутренние отступы (англ. padding) — пространство между границей блока (рамкой) и его содержимым.

Все эти свойства настраиваются в стилевом файле с помощью CSS.

Рис. 4.21

Поскольку на странице может быть много самых разных блоков, для тэга <div> обычно задаётся класс (атрибут class) или идентификатор (атрибут id). Разница в том, что идентификатор — это уникальный признак (на странице не должно быть двух элементов с одинаковым идентификатором), а класс — это описание общих свойств нескольких элементов. Для блока можно задать одновременно и класс, и идентификатор, например:

<div class="info" id="result">
Ответ: 45.
</div>

Предположим, что используется такой стилевой файл (рис. 4.22):

.info {
margin: 5рх 5рх 10рх 20рх; 
padding: Зрх;
}
#result { 
background: #CCCCFF; border: lpx solid blue;
}

Рис. 4.22

Здесь для всех элементов (в том числе и блоков) класса info устанавливаются поля (margin) и отступы (padding). Поля определены отдельно для каждой стороны в таком порядке: верхнее (5 пикселей), правое (тоже 5 пикселей), нижнее (10 пикселей) и левое (20 пикселей). Отступы одинаковые, со всех сторон по 3 пикселя.

Кроме того, для элемента с идентификатором result установлен светло-синий фон и синяя рамка. Мы видим, что к блоку применены как свойства класса, так и свойства идентификатора.

Следующая страница Пример: плавающие блоки

Cкачать материалы урока