Спецификация CSS2 - [26]
[x]. визуальные, звуковые или осязательные.
[x]. решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.
[x]. интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.
[x]. все (включает все типы носителей).
В следующей таблице показаны соотношения между группами носителей и типами носителя:
| Типы носителя | Группы носителей | |||
|---|---|---|---|---|
| непрерывный / страничный | визуальный / звуковой / осязательный | решётка / растровый | интерактивный / статичный | |
| звуковой | непрерывный | звуковой | N/A | оба |
| брайль-устройство | непрерывный | осязательный | решётка | оба |
| брайль-принтер | страничный | осязательный | решётка | оба |
| портативный | оба | визуальный | оба | оба |
| печатный | страничный | визуальный | растровый | статичный |
| проектор | страничный | визуальный | растровый | статичный |
| экран | непрерывный | визуальный | растровый | оба |
| tty | непрерывный | визуальный | решётка | оба |
| tv | оба | визуальный, звуковой | растровый | оба |
Лекция 8. Модель бокса
Модель бокса CSS описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования. Страничный бокс это особый вид бокса, детально описанный в разделе страничный носитель.
Каждый бокс имеет область содержимого(например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:
Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).
Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:
content edge/край содержимого или inner edge/внутренний край
Край содержимого окружает отображаемое содержимое.
padding edge/край заполнения
Окружает заполнение бокса . Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.
border edge/край рамки
Окружает рамку бокса . Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.
margin edge/край поля или outer edge/внешний край
Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.
Каждый край может быть разорван слева, справа, вверху и внизу.
Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.
Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.
Стиль фона различных областей бокса определяется так:
[x]. Область содержимого: свойство 'background' генерирующего элемента.
[x]. Область заполнения: свойство 'background' генерирующего элемента.
[x]. Область рамки: свойства рамки генерирующего элемента.
[x]. Область поля: поля всегда прозрачны.
Этот пример документа HTML показывает, как поля, рамки и заполнение взаимодействуют:
>
и даёт дерево документа с (помимо других соотношений) элементом UL, в котором есть два дочерних LI.
Первая диаграмма иллюстрирует, что этот пример даст в результате. Вторая иллюстрирует взаимоотношения между
