Основные блоки

CSS предполагает, что каждый элемент генерирует один или несколько прямоугольных блоков, называемых контейнерами элемента (element boxes). (В будущих версиях спецификации, возможно, появятся непрямоугольные блоки, но на данный момент все блоки прямоугольные.) Основной частью каждого блока элемента является область содержимого (content area). Область содержимого окружена произвольным количеством отступов, рамок и полей. Эти элементы считаются необязательными, потому что всем им может быть присвоена нулевая ширина, что удалит их из блока. Пример области содержимого с указанием окружающих его зон отступов.

Поля, рамки и отступы могут быть заданы посредством различных свойств, таких как margi-left или border-bottom. Фон содержимого, например цвет или повторяющееся изображение, также применяется к отступам. Поля всегда остаются прозрачными, сквозь них виден фон любых родительских элементов. Отступ не может иметь отрицательное значение, а вот поля могут. Результат применения отрицательных полей мы рассмотрим в этой главе позже. Рамки генерируются с применением определенных стилей, таких как solid или inset, а их цвета задаются свойством border-color. Если цвет не задан, рамка окрашивается в основной цвет содержимого элемента.


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

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание