Размещение и изменение размеров незамещаемых элементов

В общем случае размер и размещение элемента зависят от его блока-контейнера. Значения его различных свойств (width, right, padding-left и т. д.) влияют на ситуацию, но главную роль играет блок-контейнер. Рассмотрим ширину и горизонтальное размещение позиционированного элемента. Оно может быть представлено как уравнение left + mar- gin-left + border-left-width + padding-left + width + padding-right + bor-der-right-width + margin-right + right = ширина блока-контейнера.

Расчет довольно обоснованный. Это, по существу, уравнение, по которому определяются размеры блочных элементов в нормальном потоке, за исключением того, что сюда введены еще left и right. Как же все это взаимодействует? Необходимо проработать ряд правил. Во-первых, если для всех свойств left, width и right задать значение auto, получится результат, приведенный в предыдущем разделе: левый край помещен в его статическое положение (если это язык с написанием слева направо). В языках с написанием справа налево свое статическое положение занимает правый край. Свойство width элемента определено как «обжимающее», т. е. ширина области содержимого элемента будет не больше необходимого для вмещения содержимого. Очень похоже ведут себя ячейки таблицы.


Свойство, не определяющее статического положения (right в языках с написанием слева направо, left в языках с написанием справа налево), задается так, чтобы занималось оставшееся пространство. Например:

An absolutely positioned element can have its content
shrink-wrapped
thanks to the way positioning rules work.


Верх элемента совпадает с верхом его блока-контейнера (в данном случае div), и ширина элемента именно такая, какая нужна для вмещения содержимого. Оставшееся расстояние от правого края элемента до правого края блока-контейнера становится вычисляемым значением свойства right. Теперь предположим, что значение auto задано только для левого и правого полей, а не для left, width и right, как в данном примере:

An absolutely positioned element can have its content
shrink-wrapped
thanks to the way positioning rules work.


Это, по сути, аналогично центрированию элементов с автоматически вычисляемыми полями в нормальном потоке.


Итак, сделаем поля отличными от auto:

An absolutely positioned element can have its content
shrink-wrapped span>
thanks to the way positioning rules work.


Теперь возникла проблема. Свойства позиционирования элемента span в сумме дают всего лишь 14em, тогда как ширина блока-контейнера – 25em. Очевиден дефицит в 11em, который надо как-то компенсировать. Правила утверждают, что в этом случае агент пользователя игнорирует значение свойства right (в языках с написанием слева направо; в противном случае он игнорирует left) и вычисляет его. Иначе говоря, аналогичный результат мы получили бы, если бы объявили:

shrink-wrapped
Если бы для одного из полей было оставлено значение auto, менялось
бы оно. Предположим, стили изменены так:
shrink-wrapped span>

Визуально результат будет аналогичен, только он будет получен путем вычисления значения правого поля в 12em, а не переопределения значения свойства right.


Если же присвоить auto левому полю, тогда оно будет вычислено:

shrink-wrapped span>

В общем, если значение auto задано только для одного свойства, то именно оно будет меняться, чтобы удовлетворить уравнению, приведенному ранее в этом разделе. В соответствии со следующими стилями элемент по ширине развернется до любого нужного размера, а не «обожмет» содержимое:

shrink-wrapped

До сих пор нас интересовали только события, происходящие на горизонтальной оси, но очень похожие правила действуют и для вертикальной. Если в предыдущем обсуждении повернуть все параметры на 90°, получится практически аналогичное поведение:

element A

element B

element C



В первом случае высота элемента была такой, что он «обжимал» содержимое. Во втором случае не заданное явно свойство (bottom) было установлено, чтобы восполнить расстояние между низом позиционированного элемента и низом его блока-контейнера. В третьем случае не было определено свойство top, и поэтому разницу компенсировало оно. В этом случае применение автоматически определяемых полей может привести к вертикальному центрированию. Следующие стили определяют, что абсолютно позиционированный div будет вертикально центрирован в рамках его блока-контейнера:

element D



Необходимо отметить два небольших отличия. При горизонтальной компоновке или right, или left, если имеют значение auto, могут размещаться соответственно статическому положению. При вертикальном только top может занимать статическое положение; bottom не может в любом случае. На момент написания данной книги ни одна из версий Internet Explorer, включая IE7, не поддерживала вертикальное центрирование абсолютно позиционированных элементов при помощи значения auto их верхнего и нижнего полей. Кроме того, если размер абсолютно позиционированного элемента сверхограничен в вертикальном направлении, значение bottom игнорируется. Таким образом, в следующей ситуации объявленное значение bottom было бы переопределено вычисленным значением 5em:

element D



Средств обеспечения игнорирования значения top в случае сверхограниченности свойств нет.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание