Каскадные таблицы стилей CSS. Контейнерная модель CSS2.

⇐ ПредыдущаяСтр 6 из 8Следующая ⇒

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

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

Этот пример документа 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.

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

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

В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс " устанавливает" содержащий блок для своих потомков. Фраза " блок, содержащий бокс" означает " блок, в котором бокс находится", а не блок, генерирующий бокс.

Каждый бокс имеет позицию относительно содержащего блока, но не ограничен этим блоком и может вызвать переполнение.

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

Свойство 'position'

Static

Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.

Relative

Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.

Absolute

Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.

Fixed

Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой.

Свойство float

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

Left

Элемент генерирует бокс блока, всплывающий влево. Содержимое обтекает по правой стороне бокса, начиная от верха (субъект свойства 'clear'). 'display' игнорируется, если только оно не имеет значения 'none'.

Right

То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха.

None

Бокс не всплывает.

Позиционирование контейнера

display: inline;

block

...

position: static;

relative

absolute

fixed

top: 10px;

left: 10px;

right: 10px;

bottom: 10px;

width: 300px;

30%

height: 200px;

Плавающие контейнеры

display: block;

position: relative;

float: left;

right

min-width: 100px;

max-width: 200px;

min-height: 100px;

max-height: 200px;

Поплавок это бокс, который " всплывает" (смещается) влево или вправо на текущей строке. Самое интересное в поведении поплавка (или " всплывающего", или " плавающего" бокса) то, что содержимое может обтекать его по сторонам (или это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс, всплывающий влево, и слева - бокс всплывающий вправо.

Далее следует введение в позиционирование поплавков и обтекание содержимого; точные правила, управляющие поведением поплавков, даны в описании свойства 'float'.

Всплывающий бокс обязан иметь явно установленную ширину (назначенную свойством 'width', или свою внутреннюю ширину - в случае замещаемых элементов). Любой всплывающий бокс становится боксом блока, который сдвигается влево или вправо, пока его внешний край не коснётся края содержащего блока или внешнего края другого поплавка. Верх всплывающего бокса выравнивается с верхом текущего строчного бокса (или низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на текущей строке, он сдвигается вниз строка за строкой, пока строка не получит достаточно пространства для него.

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы).

В этом документе:

< DIV>

Some text

< P> More text

< /DIV>

(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг " Some text" имеется анонимный бокс блока.

⇐ Предыдущая 1 2 3 4 567 8 Следующая ⇒