На главную страницу
Форум

Статья :: Модель бокса

8 Модель бокса

Содержание

8.1 Размеры бокса
8.2 Пример полей, заполнения и рамок
8.3 Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
- 8.3.1 Сжатие полей
8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
8.5 Свойства рамки

Модель бокса CSS описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования. Страничный бокс это особый вид бокса, детально описанный в разделе страничный носитель.

8.1 Размеры бокса

Каждый бокс имеет область содержимого (например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:

Image illustrating the relationship between content, padding, borders, and margins. [D]

Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).

Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:

content edge/край содержимого или inner edge/внутренний край: Край содержимого окружает отображаемое содержимое.
padding edge/край заполнения: Окружает заполнение бокса. Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.
border edge/край рамки: Окружает рамку бокса. Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.
margin edge/край поля или outer edge/внешний край: Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.

Каждый край может быть разорван слева, справа, вверху и внизу.

Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.

Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.

Стиль фона различных областей бокса определяется так:

Область содержимого: свойство 'background' генерирующего элемента.
Область заполнения: свойство 'background' генерирующего элемента.
Область рамки: свойства рамки генерирующего элемента.
Область поля: поля всегда прозрачны.

8.2 Пример полей, заполнения и рамок

Этот пример документа HTML показывает, как поля, рамки и заполнение взаимодействуют:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример полей, заполнения и рамок</TITLE>
    <STYLE type="text/css">
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* Рамки не установлены */
      }
      LI { 
        color: black;                /* цвет текста - чёрный */ 
        background: gray;            /* Содержимое, заполнение будет серым */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Заметьте, что заполнение справа 0px */
        list-style: none             /* перед элементом списка нет никаких глифов */
                                     /* Рамки не установлены */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* устанавливает ширину рамок всех сторон */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>Первый элемент списка
      <LI class="withborder">Второй элемент списка длиннее,
                             чтобы показать перенос.
    </UL>
  </BODY>
</HTML>

и даёт дерево документа с (помимо других соотношений) элементом UL, в котором есть два дочерних LI.

Первая диаграмма иллюстрирует, что этот пример даст в результате.
Вторая иллюстрирует взаимоотношения между полями, рамками и заполнением элементов UL и LI.

Image illustrating how parent and child margins, borders,
and padding relate. [D]

Обратите внимание, что:

Ширина содержимого каждого бокса LI вычисляется сверху вниз; содержащий блок для каждого бокса LI устанавливается элементом UL.
Высота каждого бокса LI задаётся высотой содержимого плюс верхнее и нижнее заполнение, рамки и поля. Обратите внимание, что горизонтальные поля между боксами LI сжаты.
Правое заполнение боксов LI было установлено шириной 0 (свойство 'padding'). Результат виден на второй иллюстрации.
Поля боксов LI прозрачны - поля всегда прозрачны - так что цвет фона (зелёный) заполнения и области содержимого UL просвечивает сквозь него.
Второй элемент LI специфицирует пунктирную рамку (свойство 'border-style').

8.3 Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

Свойства поля специфицируют область полей бокса. Сокращённое свойство 'margin' устанавливает поле для всех четырёх сторон, в то время как другие свойства устанавливают только соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений <margin-width>, который может устанавливаться в:

<length>: Специфицирует фиксированную ширину.
<percentage>: Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.
auto: См. расчёт ширины и полей.

Негативные значения свойств полей допускаются, но могут существовать ограничения, специфичные для конкретных реализаций.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Значение:	<margin-width> \| inherit
Начальное:	0
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.

H1 { margin-top: 2em }

'margin'

Значение:	<margin-width>{1,4} \| inherit
Начальное:	не определено для сокращённого свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее поля устанавливаются в первое, а правое и левое поля - во второе значение. Если дано три значения, верхнее поле устанавливается в первое, левое и правое - во второе, а нижнее поле - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому полям соответственно.

BODY { margin: 2em }         /* все поля установлены в 2em */
BODY { margin: 1em 2em }     /* верхнее и нижнее = 1em, правое и левое = 2em */
BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило эквивалентно следующему:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;          /* копируется из противоположной стороны (из правой) */
}

8.3.1 Сжатие полей

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

В CSS2 вертикальные поля никогда не сжимаются.

Горизонтальные поля могут сжиматься между определёнными боксами:

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

См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.

8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:

<length>: Специфицирует фиксированную ширину.
<percentage>: Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Значение:	<padding-width> \| inherit
Начальное:	0
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.

BLOCKQUOTE { padding-top: 0.3em }

'padding'

Значение:	<padding-width>{1,4} \| inherit
Начальное:	не определено для сокращённого свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее заполнение устанавливаются в первое, а правое и левое заполнения - во второе значение. Если дано три значения, верхнее заполнение устанавливается в первое, левое и правое - во второе, а нижнее заполнение - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому заполнениям соответственно.

Цвет поверхности области заполнения специфицируется через свойство 'background':

H1 { 
  background: white; 
  padding: 1em 2em;
}

Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

8.5 Свойства рамки

Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.

Примечание. Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.

8.5.1 Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:

thin: Тонкая рамка.
medium: Средняя рамка.
thick: Толстая рамка.
<length>: Толщина рамки имеет точное значение. Это значение не может быть негативным.

Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:

'thin' <='medium' <= 'thick'.

К тому же эти значения ширины обязаны быть константными в пределах документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

Значение:	<border-width> \| inherit
Начальное:	medium
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.

'border-width'

Значение:	<border-width>{1,4} \| inherit
Начальное:	см. индивидуальные свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхняя и нижняя линии рамки устанавливаются в первое, а правая и левая линии рамки - во второе значение. Если дано три значения, верхняя линия рамки устанавливается в первое, левая и правая - во второе, а нижняя линия рамки - в третье значение. Если задано четыре значения, они применяются к верхней, правой, нижней и левой линиям рамки соответственно.

Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

Эти свойства специфицируют цвет рамки бокса.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'

Значение:	<color> \| inherit
Начальное:	значение свойства 'color'
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

'border-color'

Значение:	<color>{1,4} \| transparent \| inherit
Начальное:	см. индивидуальные свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Свойство 'border-color' устанавливает цвет рамки с четырёх сторон.
Значения имеют следующий смысл:

<color>: Специфицирует значение цвета.
transparent: Рамка прозрачна (хотя и может иметь ширину).

Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.

Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.

В этом примере рамка будет сплошной и чёрной:

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:

none: Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.
hidden: То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.
dotted: Рамка из точек.
dashed: Рамка из пунктирных линий.
solid: Рамка из сплошной линии.
double: Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.
groove: Рамка выглядит как вырезанная в канве.
ridge: Противоположно 'groove': рамка выглядит как выступающая над канвой.
inset: Весь бокс выглядит вдавленным в канву.
outset: Противоположно 'inset': выпуклый бокс.

Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.

Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Значение:	<border-style> \| inherit
Начальное:	none
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

'border-style'

Значение:	<border-style>{1,4} \| inherit
Начальное:	см. индивидуальные свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.

#xy34 { border-style: solid dotted }

В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.

Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.

8.5.4 Сокращённые свойства рамок: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'

Значение:	[ <'border-top-width'> \|\| <'border-style'> \|\| <color> ] \| inherit
Начальное:	см. индивидуальные свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.

H1 { border-bottom: thick solid red }

Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения. Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':

H1 { border-bottom: thick solid }

'border'

Значение:	[ <'border-width'> \|\| <'border-style'> \|\| <color> ] \| inherit
Начальное:	см. индивидуальные свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.

Первое правило эквивалентно установке четырёх последующих значений:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

Поскольку, в некоторой степени, свойства могут перекрываться, порядок, в котором правила специфицированы, имеет важное значение.

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.

Модель бокса
страницы в данном разделе
> О спецификации CSS2	> Полное описание анонимного бокса блока
> Звуковые таблицы стилей	> Полное описание первого примера форматирования Bach/XML
> Полное описание второго примера форматирования Bach/XML	> Полное описание моделей фона
> Модель бокса	> Полное описание иллюстрации областей бокса
> Полное описание примера бокса-списка, показывающего поля,заполнения и рамки	> Установка значений свойств, Каскадирование и Наследование
> Полное описание примера вычисления рядав таблицы и вертикального выравнивания ячеек	> Пример баннера
> Приложение B: Изменения по сравнению с CSS1	> Полное описание примера сжатия областей
> Цвета и фон	> Соответствие: требования и рекомендации
> Полное описание примера, иллюстрирующего скрытые внутренние рамки	> Индекс дескрипторов
> Полное описание диаграммы примера дерева документа	> Полное описание примера оттенения текста
> Полное описание примера зависающей заглавной буквы.	> Полное описание примера пунктуации и зависающей заглавной буквы
> Полное описание примера перекрывания поплавком элементов с нормальным расположением	> Полное описание примера того, как поплавки перекрывают боксы с нормальным расположением
> Полное описание примера поплавка и обтекания текста	> Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка
> Полное описание примера, иллюстрирующего абсолютное позиционирование	> Полное описание примера, иллюстрирующего всплывание без 'clear'
> Полное описание примера всплывания с 'clear'	> Полное описание примера всплывания
> Полное описание примера нормального расположения	> Полное описание примера относительного позиционирования
> Полное описание примера абсолютного позиционирования относительно начального содержащего блока	> Шрифты
> Полное описание примера фрэймоподобной структуры	> Генерируемое содержимое, автоматическая нумерация и списки
> Приложение D: Грамматика CSS2	> Каскадные Таблицы Стилей, Уровень 2
> Индекс	> Полное описание поведения полей/рамок в разделённом инлайн-боксе
> CSS2 Введение	> Полное описание форм шрифта italic
> Полное описание кернинга	> Полное описание примера расположения заголовка слева от таблицы
> Полное описание примера маркёров inside относительно outside	> Типы носителя
> Приложение С: Замечания по реализации и выполнению для шрифтов	> Полное описание примера несжимаемого 'overflow'
> Полное описание примера сжимаемого 'overflow'	> Полное описание примера соотношений между страничным боксом и листом (бумаги)
> Страничные носители	> Полное описание изображения GUI Windows 95 с описанием шрифтов
> Полное описание иллюстрации к определению пиксела	> Полное описание соотношений с пикселом выводного устройства
> Индекс свойств	> Ссылки
> Приложение А: Образец таблицы стилей для HTML 4.0	> Селекторы
> Синтаксис CSS2 и базовые типы данных	> Синтаксис CSS2 и базовые типы данных
> Полное описание таблицы расходов на путешествие	> Таблицы
> Полное описание примера приоритетов модели сжимающихся рамок	> Полное описание примера вычисления фона
> Полное описание примера расчёта фона ячеек	> Полное описание примера рядов, разделённых горизонтальными линиями рамки
> Полное описание примера модели раздельных рамок	> Полное описание примера, иллюстрирующего модель сжимающихся рамок
> Текст	> Полное описание примера заголовка над таблицей
> Интерфейс пользователя	> Модель визуального форматирования. Детали.
> Визуальные эффекты	> Модель визуального форматирования