задают расстояние от внутреннего края рамки контейнера до внешнего края рамки позиционируемого элемента. Эти свойства определяют расстояние не от левого верхнего угла области содержимого контейнера, а от левого верхнего угла области, занимаемой отступами контейнера. Аналогично свойства
right
и
bottom
определяют расстояние от правого нижнего угла области, занимаемой отступами.
Для полной ясности рассмотрим несложный пример. Предположим, что у вас есть динамически позиционируемый элемент, вокруг содержимого которого имеются отступы размером 10 пикселов, а вокруг них - рамка толщиной 5 пикселов.
Теперь предположим, что вы динамически позиционируете дочерний элемент внутри этого контейнера. Если установить свойство
left
дочернего элемента равным «0рх», обнаружится, что левый край дочернего элемента будет находиться непосредственно у внутреннего края рамки контейнера. При этом значении свойства дочерний элемент перекроет отступы контейнера, хотя предполагается, что они остаются пустыми (т. к. для этого и предназначены отступы). Чтобы поместить дочерний элемент в левый верхний угол области содержимого контейнера, необходимо присвоить свойствам
left
и
top
значение «10рх».
16.2.3.1. Модель border-box и свойство box-sizing
Стандартная блочная модель CSS определяет, что свойства стиля
width
и
height
задают размер области содержимого элемента и не учитывают ширину отступов и толщину рамки. Эту модель можно было бы назвать «content-box». Эта модель имеет исключения, наблюдаемые в старых версиях IE и в новых версиях CSS. При отображении страниц в IE версии ниже 6 или в IE6, 7 или 8 в «режиме совместимости» (когда страница не имеет объявления <!D0CTYPE> или это объявление недостаточно строгое), свойства
width
и
height
включают ширину отступов и толщину рамок.
Поведение IE ошибочно, но нестандартная блочная модель, реализованная в IE, иногда бывает весьма удобна. Учитывая это, в стандарт CSS3 было добавлено свойство
box-sizing
. По умолчанию оно имеет значение
content-box
, которое указывает, что используется стандартная блочная модель, описанная выше. Если вместо него указать значение
box-sizing: border-box
, броузер будет использовать блочную модель IE и свойства
width
и
height
будут включать рамки и отступы. Модель
border-box
особенно удобно использовать, когда желательно задать общий размер элемента в процентах, а ширину отступов и толщину рамки - в пикселах:
<div style="box-sizing:border-box; width: 50%;
padding: 10px; border: solid black 2px;"">
Свойство
box-sizing
поддерживается всеми текущими броузерами, но пока не во всех оно реализовано без префикса. В Chrome и Safari свойство имеет имя
– webkit-box-sizing
. В Firefox -
– moz-box-sizing
. В Opera и IE8 (и выше) свойство имеет имя
box-sizing
без префикса.
Будущей альтернативой модели
border-box
, предусматриваемой стандартом CSS3, являются вычисляемые значения свойств:
<div style="width: calc(50%-12рх); padding: 10рх; border: solid black 2px;">
Возможность вычисления значений CSS-свойств с применением calc поддерживается в IE9 и в Firefox 4 (как -moz-calc).
16.2.4. Отображение и видимость элементов
Управлять видимостью элемента документа позволяют два CSS-свойства:
visibility
и
display
. Пользоваться свойством
visibility
очень просто: если оно имеет значение
hidden
, то элемент не отображается, если
visible
, - отображается. Свойство
display
является более универсальным и служит для задания варианта отображения элемента, определяя, блочный это элемент, встраиваемый, списочный или какой-нибудь другой. Если же свойство
display
имеет значение
none
, то элемент вообще не отображается и для него даже не выделяется место на странице.
Различие между свойствами стиля
visibility
и
display
имеет отношение к их воздействию на статически или относительно позиционируемые элементы. Для элемента, расположенного в нормальном потоке вывода документа, установка свойства
visibility
в значение
hidden
делает элемент невидимым, но резервирует для него место в документе. Такой элемент может повторно скрываться и отображаться без изменения компоновки документа. Однако если свойство
display
элемента установлено в значение попе, то место в документе для него не выделяется; элементы с обеих сторон от него смыкаются, как будто его вообще не существует. Свойство
display
может пригодиться, например, при создании разворачивающихся и сворачивающихся списков.
Обратите внимание, что нет особого смысла использовать атрибуты
visibility
и
display
, чтобы сделать элемент невидимым, если вы не собираетесь динамически устанавливать их в сценарии на языке JavaScript, чтобы в какой-то момент сделать его снова видимым! Как это делается, будет показано далее в этой главе.
16.2.5. Цвет, прозрачность и полупрозрачность
Цвет текста, содержащегося в элементе документа, можно задать с помощью CSS-свойства
color
. Цвет фона любого элемента - с помощью свойства
background-color
. Выше мы видели, что цвет рамки элемента можно задать с помощью свойства
border-color
или сокращенной формы его написания
border
.
При обсуждении рамок мы рассматривали пример, в котором цвет рамки задавался указанием названий наиболее распространенных цветов, таких как «red» (красный) и «black» (черный). Стандарт CSS поддерживает множество таких обозначений цветов на английском языке, но имеется более универсальный способ определения цветов, который заключается в использовании шестнадцатеричных цифр, определяющих красную, зеленую и синюю составляющие цвета. Значения каждой из составляющих могут задаваться одной или двумя цифрами. Например:
#000000 /*черный */
#fff /*белый */
#f00 /*ярко-красный */
#404080 /*ненасыщенный темно-синий */
#ccc /*светло-серый */
Стандарт CSS3 дополнительно определяет возможность определения цвета в формате RGBA (значения красной, зеленой и синей составляющих плюс альфа-значение, определяющее степень прозрачности). Формат RGBA поддерживается всеми современными броузерами, кроме IE; ожидается, однако, что его поддержка будет включена в IE9. CSS3 также определяет поддержку форматов HSL (hue-saturation-value - тон-насыщенность-яркость) и HSLA. И снова эти форматы поддерживаются броузерами Firefox, Safari и Chrome, но не поддерживаются IE.