|
||
|
aranea.ru || Спецификация CSS2 | 9.4. Нормальное перемещение.
9.4. Нормальное перемещение.9.4.1. Контекст блочного форматирования.9.4.2. Контекст внутристрочного форматирования. 9.4.3. Относительное позиционирование. Блоки при нормальном размещении принадлежат форматирующему контексту, который может быть блочным или внутристрочным, но никогда и тем и другим одновременно. Блочный блок участвует в контексте блочного форматирования. Внутристрочные блоки участвуют в контексте внутристрочного форматирования. 9.4.1. Контекст блочного форматирования.В контексте блочного форматирования, блоки определяются один после другого, вертикально, начиная с верха объемлющего блока. Вертикальное расстояние между двумя соседними блоками определяется свойствами 'margin'. Вертикальные поля между соседними блочными блоками в контексте блочного форматирования сминаются. В контексте блочного форматирования, каждый левый внешний край блока касается левого края объемлющего блока (для форматирования справа налево, касаются правые края). Это верно даже при наличии смещения (хотя область содержания блока может сжиматься из-за смещений). Для получения подробной информации о принудительном обрыве страницы в медиа со страничным отображением, обратитесь к разделу, касающемуся разрешенных разрывов страниц. 9.4.2. Контекст внутристрочного форматирования.В контексте внутристрочного форматирования, блоки располагаются горизонтально, один за другим, начиная с вершины объемлющего блока. Горизонтальные поля, границы и отступы располагаются между этими блоками. Блоки могут выравниваться вертикально различными способами: их низ или вершина могут быть выровнены, или в них может быть выровнена базовая линия текста. Прямоугольная область, которая содержит блоки, формирующие строку, называются строчными блоками. Ширина строчного блока определяется объемлющим блоком. Высота строчного блока определяется правилами, данными в разделе по расчету высоты строк. Строчный блок всегда достаточно высок для всех блоков, которые он содержит. Но, он может быть выше, чем самый высокий блок, который он же содержит (если, например, блоки выравниваются так, что базовая линия поднимается). Когда высота блока В меньше, чем высота строчного блока, содержащего его, то вертикальное выравнивание В внутри строчного блока определяется свойством 'vertical-align'. Когда несколько строчных блока не могут горизонтально распределиться внутри единственного строчного блока, они распределяются между двумя или больше вертикально уложенных строчных блока. Таким образом, параграф является вертикальной стопкой строчных блоков. Строчные блоки складываются без вертикального разделения, и они могут накладываться. В общем, левый край строчного блока касается левого края его объемлющего блока, а его правый край касается правого края его объемлющего блока. Но, плавающие блоки могут идти между краем объемлющего блока и краем строчного блока. Таким образом, хотя строчные блоки в том же контексте строчного форматирования обычно имеют одинаковую ширину (как у объемлющего блока), они могут варьировать по ширине, если доступное горизонтальное пространство редуцируется из-за смещения. Строчные блоки в том же контексте строчного форматирования обычно варьируют по высоте (например, одна строка может содержать высокое изображение, когда другие содержат только текст). Когда полная ширина строчных блоков на строке меньше, чем ширина строчного блока, вмещающего их, то их горизонтальное распределение внутри строчного блока определяется свойством 'text-align'. Если свойство имеет значение 'justify', то устройство вывода может растянуть внутристрочные блоки. Поскольку внутристрочные блоки не могут превышать ширину строчного блока, то длинные внутристрочные блоки разбиваются на несколько блоков, и эти блоки распределяются по блокам с нескольким строками. Когда внутристрочный блок разбивается, то поля, границы и отступы не имеют визуального эффекта там, где произошло разбивание. Форматирование полей, границ и отступов не может быть полностью определено, если разбивка произошла внутри двусторонней вставки. Внутристрочные блоки разбиваться на несколько блоков внутри одного и того же строчного блока из-за обработки двухсторонне направленного текста. Внизу приводится пример конструкции внутристрочного блока. Параграф (созданный блочным элементом Р в HTML) содержит анонимный текст, вставленный элементами ЕМ и STRONG: <P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear. </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. В предыдущем примере блок ЕМ разбивается на два блока ЕМ (назовем их "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>
В зависимости от ширины Р, блоки могут распределяться следующим образом:  [D]
9.4.3. Относительное позиционирование.Как только блок размечается в соответствии с нормальным расположением, он может смещаться относительно своей позиции. Это называется относительным позиционированием. Смещение блока (В1) таким способом не влияет на блок (В2), который следует после первого: В2 получает позицию, как если В1 не смещался, и В2 не позиционируется повторно, после применения смещения В1. Это подразумевает, что относительное позиционирование может вызвать наложение блоков. Относительно позиционированные блоки сохраняют свои размеры нормального расположения, включая разрывы строк и пространство, первоначально зарезервированное для них. Относительно позиционированный блок учреждает новый объемлющий блок для дочернего блока с нормальным расположением и позиционированных наследников. Относительно позиционированный блок формируется тогда, когда свойство 'position' для элемента имеет значение 'relative'. Смещение определяется свойствами 'top', 'bottom', 'left' и 'right'. Динамическое движение относительно позиционированных блоков может производить анимационные эффекты в окружении сценариев (смотрите свойство 'visibility'). Относительное позиционирование может также использоваться, как общая форма для верхнего и нижнего индексов за исключением того, когда высота строки автоматически не регулируется для позиционирования при рассмотрении. Смотрите описание расчетов высоты строки для получения более подробной информации. Примеры относительного позиционирования предоставлены в разделе по сравнению нормального расположения, смещения и абсолютного позиционирования. |
