CSS_стили позволяют задавать поля, рамки и отступы для любого элемента, и это несколько усложняет позиционирование элементов средствами CSS, потому что для позиционирования требуется точно знать, как вычислять значения атрибу_ тов width, height, top и left при наличии рамок и отступов. Блочная модель (box model) в CSS предлагает для этого точную спецификацию (рис. 16.3). Она под_робно описывается далее.
Начнем наше обсуждение со стилей border, margin и padding. Рамка элемента – это прямоугольник, обрисованный вокруг (полностью или частично) этого элемен_ та. CSS_атрибуты позволяют задать стиль, цвет и толщину рамки:
border: solid black 1px; /*
рамка
рисуется
черной сплошной линей,
/*
толщиной
пиксел */
border: 3px dotted red; /*
рамка
рисуется
красной пунктирной линией */
/*
толщиной
пиксела */
Существует возможность определять толщину, стиль и цвет рамки с помощью отдельных CSS_атрибутов, а также отдельно для каждой из сторон рамки элемен_ та. Например, чтобы нарисовать линию под элементом, достаточно просто уста_ новить значение атрибута border_bottom. Можно даже определить толщину, стиль или цвет только одной стороны элемента. Это иллюстрирует рис. 16.3, на кото_ ром показаны такие атрибуты рамки, как border_top_width и border_left_width.
Атрибуты margin и padding задают ширину пустого пространства вокруг элемен_ та. Отличие (очень важное) между этими атрибутами заключается в том, что ат_
Глава 16. CSS и DHTML
Рис. 16.3. Блочная модель в CSS (рамки, отступы и атрибуты позиционирования)
рибут margin задает ширину пустого пространства снаружи рамки, между рамка_ ми соседних элементов, а padding – внутри рамки, между рамкой и содержимым элемента. Атрибут margin предназначен для создания визуального пространства между элементами (возможно окруженными рамками) в нормальном потоке вы_ вода документа. Атрибут padding предназначен для визуального отделения со_ держимого элемента от его рамки. Если элемент не имеет рамки, устанавливать атрибут padding обычно не требуется. Если элемент позиционируется динамиче_ ски, значит, он не является частью нормального потока вывода документа и по_ тому не имеет смысла задавать значение атрибута margin. (Именно по этой при_ чине на рис. 16.3 атрибуты margin не показаны.)
Поля и отступы элемента задаются с помощью атрибутов margin и padding соот_ ветственно:
margin: 5px; padding: 5px;
Помимо этого можно определить поля и отступы отдельно для каждой из сторон элемента:
margin_left: 25px; padding_bottom: 5px;
С помощью атрибутов margin и padding можно также задать значения полей и от_ ступов для всех четырех сторон элемента. В этом случае значение атрибута сна_ чала задается для верхней стороны и далее по часовой стрелке, т. е. порядок та_ ков: верх, правая сторона, низ, левая сторона. Например, следующий фрагмент демонстрирует два эквивалентных способа установки различных значений от_ дельно для каждой из сторон элемента:
Порядок работы с атрибутом margin ничем не отличается.
Теперь, получив представление о полях, рамках и отступах, можно переходить к детальному изучению атрибутов позиционирования в CSS. Во_первых, атрибу_ ты width и height определяют лишь размеры содержимого элемента – они не учи_ тывают дополнительное пространство, необходимое для размещения полей, ра_ мок и отступов. Чтобы определить полную ширину элемента на экране вместе с рамками, необходимо сложить отступы с левой и правой сторон, толщину ра_ мок с левой и правой сторон, а затем добавить к полученному значению ширину элемента. Аналогично, чтобы получить полную высоту, необходимо сложить от_ ступы сверху и снизу, толщину рамок сверху и снизу, а затем добавить высоту элемента.
Поскольку атрибуты width и height определяют ширину и высоту только области содержимого элемента, может появиться мысль, что атрибуты left и top (а так же right и bottom) должны измеряться относительно области содержимого объем_ лющего элемента. Однако это не так. Стандарт CSS утверждает, что эти значе_ ния измеряются относительно внешнего края отступов объемлющего элемента (т. е. относительно внутреннего края рамки объемлющего элемента).
Все это иллюстрирует рис. 16.3, но чтобы не оставлять сомнений, рассмотрим несложный пример. Предположим, что у вас есть динамически позиционируе_ мый элемент, вокруг содержимого которого имеются отступы размером 10 пик_ селов, а вокруг них – рамка толщиной 5 пикселов. Теперь предположим, что вы динамически позиционируете дочерний элемент внутри этого контейнера. Если установить атрибут left дочернего элемента равным 0px, обнаружится, что ле_ вый край дочернего элемента будет находиться непосредственно у внутреннего края рамки контейнера. При этом значении атрибута дочерний элемент пере_ крывает отступы контейнера, хотя предполагается, что они остаются пустыми (т. к. для этого и предназначены отступы). Чтобы поместить дочерний элемент в левый верхний угол области содержимого контейнера, необходимо установить атрибуты left и top равными 10px.
