Содержание
Эта и дальнейшие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.
В модели визуального форматирования всякий элемент дерева документа генерирует нуль либо больше боксов в соответствии с моделью боксов. Конструкция этих боксов управляется:
Свойства, определённые в этой и следующих главах, используются и к непрерывным носителям, и к страничным носителям. В то же время, значения свойств полей варьируются при применении со страничным носителем (см. в страничной модели).
Модель визуального форматирования не определяет все аспекты форматирования (скажем, она не специфицирует алгорифм расстояний между буквами). Поведение соответствующих ПА может отличаться в вопросах форматирования.
ПА для непрерывных носителей традиционно предлагают пользователю порт просмотра (окно либо иную область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра поменьше, чем первоначальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать больше чем одну канву (т.е. предоставлять разные виды того же самого документа).
В CSS2 многие варианты позиционирования и размеры вычисляются касательно кромки прямоугольного бокса, называемого содержащий блок. Обыкновенно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" обозначает "блок, в котором бокс находится", а не блок, генерирующий бокс.
Каждый бокс имеет позицию касательно содержащего блока, но не лимитирован этим блоком и может вызвать переполнение.
Корневой элемент дерева документа генерирует бокс, тот, что служит начальным содержащим блоком для дальнейшего итога.
Ширина исходного содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это качество имеет значение 'auto', ПА предоставляет исходное значение ширины (скажем, ПА использует нынешнюю ширину порта просмотра).
Высота исходного содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это качество имеет значение 'auto', высота содержащего блока возрастает, дабы адаптироваться к содержимому документа.
Начальный содержащий блок не может быть позиционирован либо всплывать (т.е. ПА игнорируют свойства 'position' и 'float' корневого элемента).
Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе.
Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Качество 'display', описанное ниже, специфицирует тип бокса.
Элементы яруса блока это элементы документа-источника, визуально отформатированные как блоки (скажем, параграфы). Разные значения свойства 'display' создают элемент яруса блока: 'block', 'list-item', 'compact', 'run-in' (не неизменно; см. компактные и втягивающиеся боксы) и 'table'.
Элементы яруса блока генерируют основной бокс блока, и только он содержит боксы блоков. Стержневой бокс блока устанавливает содержащий блок для боксов-потомков и сгенерированного содержимого и является также боксом, участвующим в всякий схеме позиционирования. Основные боксы блока действуют в контексте форматирования блока.
Некоторые элементы яруса блока генерируют добавочные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти добавочные боксы размещаются касательно основного бокса.
В этом документе:
<DIV> Some text <P>More text </DIV>(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-яруса, и яруса блока. Дабы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.
Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя иной бокс блока (как P), тогда мы принуждаем его иметь боксы блока только внутри себя, перенеся всякие инлайн-боксы в неизвестный бокс блока.
Эта модель будет применена в дальнейшем примере, если данные правила:
/* Примечание: ПАгенты HTML могут не рассматривать эти правила */ BODY { display: inline } P { display: block }
будут использованы в данном документе HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> <TITLE>Неизвестный текст, прерываемый блоком.</TITLE> </HEAD> <BODY> Анонимный текст до P. <P>Содержимое элемента P.</> Анонимный текст позже P. </BODY>
Элемент BODY содержит отрывок (C1) неизвестного текста, позже которого идут элемент яруса блока и 2-й отрывок неизвестного текста (C2). В итоге получим неизвестный бокс блока для BODY, содержащий неизвестный бокс блока вокруг C1, бокс блока P и 2-й неизвестный бокс блока вокруг C2.
Свойства неизвестных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои исходные значения. Скажем, шрифт неизвестного бокса наследуется из DIV, но поля имеют значения 0.
Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (скажем, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Разные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не неизменно; см. компактные и втягивающиеся боксы). Элементы инлайн-яруса (встроенные) генерируют инлайн-боксы.
Инлайн-боксы могут принимать участие в разных контекстах форматирования:
В таком документе:
<P>Определенный <EM>выделенный</em> текст.</P>
элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом яруса блока (P). Последние именуются неизвестными инлайн-боксами, от того что они не имеют ассоциированного инлайн-элемента.
Такие неизвестные инлайн-боксы наследуют наследуемые свойства своего родительского бокса яруса блока. Ненаследуемые свойства получают свои исходные значения. В примере - цвет неизвестных исходных боксов наследуется из P, но фон остаётся прозрачным.
Если из контекста ясно, какой тип неизвестных боксов подразумевается, то и боксы инлайн, и боксы яруса блока именуются в данной спецификации неизвестными боксами.
Имеются и другие типы неизвестных боксов, возникающие при форматировании таблиц.
Бокс compact ведёт себя так:
Compact-бокс позиционируется в поле дальнейшим образом: он находится вне (слева либо справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Качество 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса касательно строчного бокса. Позиция compact-бокса по горизонтали - неизменно в поле бокса блока.
Элемент, тот, что не может быть отформатирован в пределах одной строчки, не может размещаться в поле дальнейшего блока. Скажем, элемент 'compact' в HTML, тот, что содержит элемент BR, неизменно будет форматироваться как бокс блока (принимая для BR жанр по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле зачастую огромнее подойдёт качество 'float'.
Следующий пример иллюстрирует compact-бокс:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>A compact box example</TITLE> <STYLE type="text/css"> DT { display: compact } DD { margin-left: 4em } </STYLE> </HEAD> <BODY> <DL> <DT>Short <DD><P>Description goes here. <DT>too long for the margin <DD><P>Description goes here. </DL> </BODY> </HTML>
Этот пример может выглядеть позже форматирования так:
short Description goes here too long for the margin Description goes here
Свойство 'text-align' дозволено применять для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') либо по центру поля ('center'). Значение 'justify' не используется и обрабатывается либо как 'left', либо как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').
Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.
Бокс run-in ведёт себя так:
Бокс 'run-in' применяется для run-in-заголовков, как в этом примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Пример бокса run-in</TITLE> <STYLE type="text/css"> H3 { display: run-in } </STYLE> </HEAD> <BODY> <H3>Заголовок run-in.</H3> <P>И параграф текста, дальнейший за ним. </BODY> </HTML>
Этот пример может форматироваться так:
Заголовок run-in. И параграф текста, дальнейший за ним.
Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.
Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.
Значение: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
Начальное: | inline |
Применяется: | все элементы |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | все |
Значения этого свойства имеют дальнейший толк:
Обратите внимание, что отображение 'none' не создаёт заметный бокс; боксы вообще не создаются. CSS содержит механизмы, делающие допустимым генерацию элементом бокса в структуре форматирования, тот, что влияет на конструкцию форматирования, но заметен. См. детали в разделе Видимость.
Заметьте, что, правда начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.
Несколько примеров свойства 'display':
P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } /* Не выводить изображения */
Соответствующие ПА HTML могут игнорировать качество 'display'.
В CSS2 бокс может находиться в различных слоях в соответствии со схемами позиционирования:
Свойства 'position' и 'float' определяют, какой из алгорифмов позиционирования CSS2 применяется для расчёта позиции бокса.
Значение: | static | relative | absolute | fixed | inherit |
Начальное: | static |
Применяется: | ко каждым элементам, но не к генерируемому содержимому |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Значения имеют дальнейший толк:
@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }
Элемент именуется позиционированным, если его качество 'position' имеет значение, хорошее от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Это качество специфицирует, насколько смещён вниз верхний край содержимого бокса касательно верхнего края содержащего блока.
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Это качество специфицирует, насколько смещён налево правый край содержимого бокса касательно правого края содержащего блока.
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Это качество специфицирует, насколько смещён вверх нижний край содержимого бокса касательно низа содержащего блока.
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Это качество специфицирует, насколько смещён вправо левый край содержимого бокса касательно левого края содержащего блока.
Значения для этих четырёх свойств имеют дальнейший толк:
Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для касательно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся типичное расположение, а после этого - смещение от этой позиции в соответствии с вышеуказанными свойствами).
Боксы при типичном обтекании относятся к контексту форматирования, тот, что может быть яруса блока и инлайн, но не тем и иным единовременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.
В контексте форматирования блока боксы устанавливаются один за иным, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя родными боксами определяется свойством 'margin'. Горизонтальные поля между смежными боксами блока в контексте форматирования блока сжимаются.
В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это правильно даже в случае с поплавками (правда область содержимого может усекаться из-за поплавков).
Информацию о обрывах страниц в страничных носителях см. в разделе допустимые обрывы страниц.
В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за иным, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими методами: могут быть выровнены их нижние либо верхние края либо базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, именуется строчный бокс.
Ширина строчного бокса определяется содержащим блоком. Высота строчного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс неизменно имеет высоту, довольную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, скажем, боксы выровнены так, что базовые линии выстроены). Если высота бокса В поменьше, чем высота строчного бокса, содержащего его, то вертикальное выравнивание В внутри строчного бокса определяется свойством 'vertical-align'.
Если несколько инлайн-боксов не входят по горизонтали в один строчный бокс, они распределяются на два либо больше вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без распределения и никогда не перекрываются.
Вообще, левый край строчного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут возникать между краем содержащего блока и краем строчного блока. Таким образом, правда строчные боксы в том же самом контексте инлайн-форматирования обыкновенно имеют ту же самую ширину (что и содержащий блок), они могут иметь и иную ширину из-за поплавков, сокращающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования традиционно различаются по высоте (скажем, одна строка может содержать высокое изображение, а другие строки - только текст).
Если суммарная ширина инлайн-боксов в строке поменьше, чем ширина строчного бокса, содержащего их, то их разделение по горизонтали внутри строчного бокса определяется свойством 'text-align'. Если это качество имеет значение 'justify', ПА может уплотнить инлайн-боксы.
Поскольку инлайн-бокс не может превысить ширину строчного бокса, длинные инлайн-боксы разделяются на несколько боксов, и эти боксы распределяются на несколько строчных боксов. Если инлайн-бокс разделён, то поля, рамки и заполнение не имеют визуального результата в тех местах, где происходит распределение. Форматирование полей, рамок и заполнения может не быть определено всецело, если распределение происходит внутри двунаправленного внедрения.
Инлайн-боксы могут также быть поделены на несколько боксов внутри одного строчного бокса из-за двунаправленной обработки текста.
Вот пример конструкции инлайн-боксов. Дальнейший параграф (сделанный элементом Р яруса блока в HTML) содержит неизвестный текст, распределённый между элементами EM и STRONG:
<P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P>
Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - неизвестные:
Чтобы сформатировать параграф, ПА вставляет пять боксов в строчный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок довольно широк, все инлайн-боксы войдут в один строчный бокс:
Several emphasized words appear in this sentence, dear.
если нет, инлайн-боксы будут поделены и распределены по нескольким строчным боксам. Предшествующий параграф может быть разделён так:
Several emphasized words appear in this sentence, dear.либо так:
Several emphasized words appear in this sentence, dear.
В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение либо текстовый орнамент не имеют видимого результата позже split1 либо до split2.
Разгляди дальнейший пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type="text/css"> EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } </STYLE> </HEAD> <BODY> <P>Several <EM>emphasized words</EM> appear here.</P> </BODY> </HTML>
В зависимости от ширины P, боксы могут распределиться так:
После того, как бокс размещен в соответствии с нормальным расположением, он может быть сдвинут касательно этой позиции. Это именуется относительным позиционированием. Смещение бокса (B1) таким методом не окажет воздействия на бокс (B2), дальнейший за ним: B2 получит такую позицию, как словно B1 не смещён и B2 не перемещается позже использования смещения B1. Это полагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.
Относительно позиционированные боксы сберегают свои типичные размеры и прорисовку, включая обрывы строк и заполнение, изначально зарезервированные за ними. Касательно позиционированный бокс устанавливает новейший содержащий блок для типичной прорисовки дочерних и позиционированных потомков.
Относительно позиционированный бокс генерируется, когда качество 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.
Динамическое перемещение боксов, позиционированных касательно, может создавать результаты анимации в среде скриптов (см. также качество 'visibility'). Относительное позиционирование дозволено применять также как всеобщую форму под- и надиндексов, за исключением того, что высота строки не устанавливается механически при рассмотрении позиционирования. См. добавочно изложение вычисления высоты строки.
Примеры относительного позиционирования есть в разделе Сравнение типичного позиционирования, поплавков и безусловного позиционирования.
Поплавок это бокс, тот, что "всплывает"
(смещается) налево либо
вправо на нынешней строке. Самое увлекательное
в поведении поплавка (либо "всплывающего",
либо "плавающего" бокса) то, что
содержимое может обтекать его по сторонам (либо
это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс,
всплывающий налево, и слева - бокс
всплывающий вправо.
Дальше следует вступление в позиционирование
поплавков и обтекание содержимого; точные правила, руководящие
поведением поплавков, даны в изложении
свойства 'float'.
Всплывающий бокс обязан иметь очевидно установленную ширину (назначенную свойством 'width', либо свою внутреннюю ширину - в случае замещаемых элементов). Всякий всплывающий бокс становится боксом блока, тот, что сдвигается налево либо вправо, пока его внешний край не коснётся края содержащего блока либо внешнего края иного поплавка. Верх всплывающего бокса выравнивается с верхом нынешнего строчного бокса (либо низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на нынешней строке, он сдвигается вниз строка за строкой, пока строка не получит довольно пространства для него.
Пока поплавок не всплыл, непозиционированные боксы блока, сделанные до и позже всплывающего бокса, всплывают вертикально, как словно поплавка не существует. Впрочем строчные боксы, сделанные сразу позже поплавка, уменьшаются, дабы дать пространство для всплывающего бокса. Всякое содержимое на нынешней строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.
Несколько поплавков могут быть смежными, и эта модель используется также к смежным поплавкам на той же строке.
Следующее правило вызывает всплывание налево всех боксов IMG с class="icon" (и устанавливает левое поле в '0'):
IMG.icon { float: left; margin-left: 0; }
Рассмотрим следующие HTML и таблицу жанров:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif alt="This image will illustrate floats"> Some sample text that has no other... </BODY> </HTML>
IMG-бокс всплывает налево. Дальнейшее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) позже поплавка. Данный документ может быть сформатирован так:
Форматирование могло бы быть верно таким же, если бы документ был дальнейшим:
<BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate floats"> that has no other... </BODY>
поскольку содержимое слева от поплавка замещается поплавком и обтекает его вниз по его правой стороне.
Поля всплывающих боксов никогда не сжимаются полями смежных боксов. Таким образом, в предыдущем примере вертикальные поля не сжимаются между боксом P и всплывающим IMG-боксом.
Поплавок может перекрывать другие боксы при типичном позиционировании (скажем, когда типично позиционированный бокс, дальнейший за поплавком, имеет негативные поля). Когда инлайн-бокс перекрывается поплавком, содержимое, фон и рамки инлайн-бокса отображаются впереди поплавка. Если блок бокса перекрывается, фон и рамки бокса блока отображаются позади поплавка и видны только там, где бокс прозрачен. Содержимое бокса блока отображается спереди от поплавка.
Вот иная иллюстрация, показывающая, что происходит, когда поплавок перекрывает рамки элемента с типичным всплыванием.
Следующий пример иллюстрирует применение свойства 'clear' для предотвращения всплывания содержимого позже поплавка.
Значение: | left | right | none | inherit |
Начальное: | none |
Применяется: | ко каждому, помимо позиционированных элементов и генерируемого содержимого |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Это качество специфицирует, должен ли
бокс всплывать налево, вправо либо не
всплывать вообще. Оно может быть
установлено для элементов, генерирующих
боксы, которые не
позиционированы абсолютно.
Значения этого свойства имеют дальнейший
толк:
Вот точные правила, руководящие поведением поплавка:
Значение: | none | left | right | both | inherit |
Начальное: | none |
Применяется: | к элементам яруса блока |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Это качество указывает, какие стороны бокса(ов) элемента не могут быть смежными с ранее всплывшим боксом. (Может быть такое, что элемент сам имеет всплывающих потомков; качество 'clear' не оказывает на них воздействия.)
Это качество может быть специфицировано только для элементов уровня блока (включая поплавки). Для компактных и втягивающихся боксов это качество используется к окончательному боксу блока, к которому суперкомпактный либо втягивающийся бокс принадлежит.
Значения имеют дальнейший толк при использовании к невсплывающим боксам блока:
Если качество установлено на всплывающие элементы, итогом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (#10):
В модели безусловного позиционирования бокс смещается очевидно касательно своего содержащего блока. Он всецело удаляется из типичного позиционирования (не влияет на последующих родственников). Безусловно позиционированный бокс устанавливает новейший содержащий блок для типично позиционируемых дочерних боксов и позиционируемых потомков. В то же время, содержимое безусловно позиционированных элементов не всплывает вокруг других боксов. Эти элементы могут либо могут не закрывать собой содержимое иного бокса, в зависимости от уровней в стэке у перекрываемых боксов.
Ссылки в данной спецификации на абсолютно позиционированный элемент (либо его бокс) подразумевают, что качество 'position' элемента имеет значение 'absolute' либо 'fixed'.
Фиксированное позиционирование это
подкатегория безусловного позиционирования.
Исключительное различие в том, что для
фиксированно позиционированного бокса
содержащий блок устанавливается портом
просмотра.
Для непрерывных носителей
фиксированные боксы не перемещаются при
прокрутке документа. В этом смысле они
схожи на фиксированные
фоновые изображения.
Для страничных носителей
боксы с фиксированной позицией повторяются
на всей странице. Это применяется для
размещения, к примеру, подписи внизу всякой
страницы.
Авторы могут применять фиксированное позиционирование для создания фрэймоподобных презентаций. Разглядим следующую конструкцию фрэймов:
Этого дозволено добиться с подмогой такого документа HTML и таблицы жанров:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Документ с фрэймами в CSS2</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } /* Нужен дальше для процентной высоты */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; } </STYLE> </HEAD> <BODY> <DIV id="header"> ... </DIV> <DIV id="sidebar"> ... </DIV> <DIV id="main"> ... </DIV> <DIV id="footer"> ... </DIV> </BODY> </HTML>
Три свойства, влияющие на генерацию и конструкцию бокса -- 'display', 'position' и 'float' -- взаимодействуют так:
Примечание. CSS2 не специфицирует поведение конструкции, если значения этих свойств изменяются скриптами. Скажем, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое либо форматирование останется изначальным? Результат находится за пределами данного документа, и схоже, что такое поведение отличалось для ранних реализаций CSS2.
Чтобы проиллюстрировать разницу между типичным и относительным позиционированием, поплавками и безусловным позиционированием, мы предлагаем серию примеров на базе дальнейшего фрагмента HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Сопоставление схем позиционирования</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id="outer"> Start of outer contents. <SPAN id="inner"> Inner contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>
Для этого документа мы принимаем следующие правила:
BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }
Окончательные позиции боксов, генерируемых внешними и внутренними элементами, разны в всем примере. В всей иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации применяют разные горизонтальные и вертикальные масштабы.)
Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:
#outer { color: red } #inner { color: blue }
Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следственно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то сходственное:
Чтобы увидеть действие относительного позиционирования, мы специфицируем:
#outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }
Текст размещен типично до элемента outer. Текст outer после этого всплывает в своей типичной позиции и размерах в конце строки 1. После этого инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются совместно на '-12px' (вверх).
Содержание inner как дочернего от outer было бы типично расположено сразу позже слов "of outer contents" (на строке 1.5). Впрочем содержимое inner само смещено касательно содержимого outer на '12px' (вниз), обратно на свою изначальную позицию на строке 2.
Обратите внимание, что на содержимое, следующее позже outer, относительное позиционирование outer не влияет.
Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.
Теперь разглядим результат от всплывания текста элемента inner вправо при применении следующих правил:
#outer { color: red } #inner { float: right; width: 130px; color: blue }
Текст типично размещен до бокса inner, тот, что вытолкнут из расположения и всплыл к правому полю (его 'width' установлено очевидно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.
Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Сопоставление схем позиционирования II</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id=outer> Start of outer contents. <SPAN id=inner> Inner contents.</SPAN> <SPAN id=sibling> Sibling contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>
Следующие правила:
#inner { float: right; width: 130px; color: blue } #sibling { color: red }
заставляют бокс inner всплывать вправо, как и прежде, а остальной текст документа - всплывать в незанятом пространстве:
Однако, если качество 'clear' родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:
#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }
Наконец, мы разглядим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:
#outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue }
которые позиционируют верх бокса outer касательно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным прародителем (либо, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован типично касательно родителя.
Следующий пример покажет безусловно позиционированный бокс, являющийся дочерним от касательно позиционированного бокса. Правда родительский бокс outer не имеет смещения, установка его свойства 'position' в 'relative' обозначает, что данный бокс может служить как содержащий блок для позиционированных потомков. От того что бокс outer это инлайн-бокс, разделённый на несколько строк, край верха первого инлайн-бокса и левый край (обозначенный толстой пунктирной линией на рисунке ниже) служат как ссылки для смещений 'top' и 'left'.
#outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }
В итоге получится приблизительно так:
Если мы не позиционируем бокс outer:
#outer { color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }
содержащий блок для inner станет начальным содержащим блоком (в нашем примере). Дальнейшая иллюстрация показывает, где в этом случае окажется бокс inner.
Относительное и безусловное позиционирование может применяться для выполнения смены баннеров, как показано в дальнейшем примере. Такой документ:
<P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN> word.</P>
может дать в итоге приблизительно это:
Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) размещен типично. После этого он смещается на '10px' от левого края содержащего блока (таким образом, правое поле в '10px' резервируется для полагаемого смещения). Два дефиса, работающие как сменяющиеся баннеры, изымаются из расположения и позиционируются на нынешней строке (от того что 'top: auto'), на '-1em' от левого края своего содержащего блока (установленного P в свою окончательную позицию). В итоге сменяющиеся баннеры "всплывают" слева от нынешней строки.
В последующих разделах выражение "спереди от" обозначает ближе к пользователю, смотрящему на экран.
В CSS2 всякий бокс имеет позицию в трёх измерениях. В дополнение к позиции касательно вертикали и горизонтали, боксы расположены по "z-axis/оси z" и форматируются один над иным. Позиции по оси z обыкновенно рассматриваются, когда боксы перекрываются визуально. В этом разделе обсуждается, как боксы дозволено позиционировать касательно оси z.
Каждый бокс принадлежит к контексту стэка. Весь бокс в данном контексте стэка имеет целочисленный уровень стэка, являющийся позицией бокса по оси z касательно других боксов того же самого контекста стэка. Боксы с огромным ярусом стэка неизменно форматируются перед боксами с меньшим ярусами стэка. Боксы могут иметь негативные значения яруса стэка. Боксы, имеющие тот же ярус в контексте стэка, упакованы снизу-вверх в соответствии с порядком дерева документа.
Корневой элемент создаёт корневой контекст стэка, но другие элементы могут устанавливать локальные контексты стэка. Контексты стэка наследуются. Локальный контекст стэка первичен; боксы других контекстов стэка не могут возникать между его боксами.
Элемент, устанавливающий локальный контекст стэка, генерирует бокс, тот, что имеет два яруса стэка: один для контекста создаваемого стэка (неизменно '0') и 2-й для контекста стэка, к которому он (бокс) принадлежит (задаваемый свойством 'z-index').
Бокс элемента имеет тот же ярус стэка, что и его бокс-родитель, если только не задан иной ярус стэка свойством 'z-index'.
Значение: | auto | <integer> | inherit |
Начальное: | auto |
Применяется: | к позиционированным элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Для позиционированных боксов качество 'z-index' специфицирует:
Значения имеют дальнейший толк:
В дальнейшем примере ярусы стэка боксов (именованных своими признаками "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Ярус стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Z-позиционирование</TITLE> <STYLE type="text/css"> .pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; } </STYLE> </HEAD> <BODY> <P> <IMG id="image" class="pile" src="butterfly.gif" alt="A butterfly image" style="z-index: 1"> <DIV id="text1" class="pile" style="z-index: 3"> This text will overlay the butterfly image. </DIV> <DIV id="text2"> This text will be beneath everything. </DIV> <DIV id="text3" class="pile" style="z-index: 2"> This text will underlay text1, but overlay the butterfly image </DIV> </BODY> </HTML>
Этот пример показывает представление прозрачности. Поведение по умолчанию бокса - разрешать боксам, находящимся сзади, быть видимыми через прозрачные области своего содержимого. В примере всякий бокс прозрачно накладывается на боксы ниже себя. Это поведение может быть переопределено путём применения одного из существующих свойств фона.
Символы в некоторых видах письма записываются справа налево. В некоторых документах, исключительно на арабском и иудейском, и в некоторых контекстах смешивания языков текст в одиночном (визуально отображаемом) блоке может возникать со смешанным направлением письма. Данный феномен именуется bidirectionality\двунаправленность, либо сокращённо - "bidi".
Стандарт Unicode ([UNICODE], раздел 3.11) даёт непростой алгорифм определения направления текста. Данный алгорифм состоит из подразумеваемой части, основывающейся на свойствах символов, а также очевидной, контролирующей внедрения и переопределения. CSS2 обращается к этому алгорифму для достижения соответствующего двунаправленного отображения. Свойства 'direction' и 'unicode-bidi' разрешают авторам специфицировать, как элементы и признаки языка документа отображаются в данный алгорифм.
Если документ содержит символы справа-налево и если ПА отображает эти символы соответствующими глифами (а не произвольно замещающими, такими как знак кавычки, 16-ричный код, чёрный бокс и т.п.), то ПА обязан использовать двунаправленный алгорифм. Это кажущееся односторонним требование отражает тот факт, что, правда не всякий иудейский либо арабский документ содержит текст различных направлений, крупна вероятность того, что эти документы могут содержать текст слева-направо (скажем, числа, текст из других языков).
Поскольку направление текста зависит от конструкции и семантики документа, эти свойства обязаны в большинстве случаев применяться только дизайнерами изложения типа документа (ОТД) либо авторами особых документов. Если таблица жанров по умолчанию специфицирует эти свойства, то авторы и пользователи не обязаны специфицировать правила для их переопределения. Нормальным исключением будет переопределение bidi-поведения в ПА, если данный ПА изготавливает транслитерацию идиша (обыкновенно записанного буквами иврита) на латиницу по запросу пользователя.
Спецификация HTML 4.0 ([HTML40], раздел 8.2) определяет двунаправленное поведение для элементов HTML. Соответствующие HTML ПАгенты могут следственно игнорировать свойства 'direction' и 'unicode-bidi' в авторских и пользовательских таблицах жанров. Правила таблиц жанров, которые нужно использовать для bidi-поведения и которые специфицированы в [HTML40], даны в примере таблицы стилей. Спецификация HTML 4.0 содержит также дополнительную информацию о вопросах двунаправленности.
Значение: | ltr | rtl | inherit |
Начальное: | ltr |
Применяется: | ко каждому элементам, но см. текст |
Наследуется: | да |
Процентное: | N/A |
Носитель: | визуальный |
Это качество специфицирует базовое направление письма блоков и направление внедрений и переопределений (см. 'unicode-bidi') для двунаправленного алгорифма Unicode. Добавочно оно специфицирует направление для столбца таблицы, направление горизонтального переполнения и позицию неполной последней строки блока в том случае, если 'text-align: justify'.
Значения этого свойства имеют дальнейший толк:
Чтобы качество 'direction' работало в элементах инлайн-яруса, значение свойства 'unicode-bidi' обязано быть 'embed' либо 'override'.
Примечание. Качество 'direction', специфицированное для элементов столбца таблицы, не наследуется ячейками столбца, от того что столбцы не существуют в дереве документа. Таким образом, CSS не может применять правила наследования признака "dir", описанные в [HTML40], в разделе 11.3.2.1.
Значение: | normal | embed | bidi-override | inherit |
Начальное: | normal |
Применяется: | ко каждом элементам, но см. текст |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Значения этого свойства имеют дальнейший толк:
Окончательный порядок символов в всем элементе яруса блока - такой, как если бы bidi-код управления был добавлен так, как описано выше, разметка была бы вырезана, а результирующая последовательность символов - передана в двунаправленный алгорифм Unicode в обыкновенный текст, тот, что производил бы те же самые обрывы строк, что и стилизованный текст. В этом процессе нетекстуальные объекты, такие как изображения, рассматриваются как нейтральные символы, если только их качество 'unicode-bidi' не имеет значений, чудесных от 'normal', тогда они рассматриваются как полужирные (strong) символы в 'direction', специфицированном для элемента.
Пожалуйста, обратите внимание, что, для того дабы иметь возможность поместить инлайн-боксы в одном направлении (все слева-направо либо все справа-налево), может потребоваться создание дополнительных инлайн-боксов (включая неизвестные инлайн-боксы), и потребуется поделить и переупорядочить некоторые инлайн-боксы до размещения.
Поскольку алгорифм Unicode имеет предел - 15 ярусов внедрения, отличнее не применять 'unicode-bidi' со значениями, чудесными от 'normal', если отсутствуют подходящие. Значение 'inherit' должно применяться исключительно осмотрительно. Впрочем для элементов, которые традиционно предполагается отображать как блоки, установка 'unicode-bidi: embed' предпочтительнее для удержания элементов совместно в том случае, когда дисплей изменяется на инлайн (см. пример ниже).
В дальнейшем примере показан документ XML с двунаправленным текстом. Он иллюстрирует значимый тезис дизайна: дизайнеры ОТД обязаны принимать в расчёт bidi и в собственно языке (элементы и признаки), и в сопровождающих таблицах жанров. Таблицы жанров обязаны быть разработаны так, дабы правила bidi были отделены от других правил жанра. Правила bidi не обязаны переопределяться другими таблицами жанров, дабы сберечь поведение bidi языка и ОТД.
Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево:
<HEBREW> <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR> <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR> </HEBREW> <ENGLISH> <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR> <PAR>english14 english15 english16</PAR> <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR> </ENGLISH>
Поскольку это - XML, таблица жанров отвечает
за направление письма.
Это таблица жанров:
/* Правила для bidi */ HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed} ENGLISH {direction: ltr; unicode-bidi: embed} /* Правила для представления */ HEBREW, ENGLISH, PAR {display: block} EMPH {font-weight: bold}
Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обыкновенно имена элементов обязаны относиться к структуре, без ссылок на языки.
Элемент EMPH - яруса инлайн, и, от того что его значение для 'unicode-bidi' - 'normal' (исходное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, наоборот, создаёт внедрение.
Если длина строки довольно огромная, форматирование текста может выглядеть приблизительно так:
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH
Заметьте, что внедрение HE-QUO принуждает HEBREW18 находиться справа от english19.
Если строки обязаны быть разбиты, то выглядеть будет приблизительно так:
2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19
Поскольку HEBREW18 обязан быть прочитан до english19,
он находится в строке над english19. Легкой
обрыв строки из предыдущего форматирования
не должен сработать.
Подметьте также, что 1-й слог из english19
может войти на предыдущую строку, но перенос
слов слева-направо в контекст справа-налево
и напротив обыкновенно подавляется, дабы
исключить отображение знака переноса в
середине строки.