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

Правила позиционирования для незамещаемых элементов отличаются от правил для замещаемых элементов. Причина в том, что замещаемые элементы имеют собственную высоту и ширину и, следовательно, меняют свои размеры, только если прямо определяются автором. Таким образом, в позиционировании замещаемых элементов не действует принцип «обжима».

Схемы поведения, связанные с размещением и изменением размеров замещаемых элементов, проще всего выразить рядом последовательных правил:

1. Если ширине присвоено значение auto, то ее реальное значение определяется шириной содержимого элемента. Таким образом, если ширина изображения составляет 50 пикселов, то и реальное значение будет равно 50px. Если ширина объявлена явно (т. е. что-то вроде 100px или 50%), то именно это значение ей и присваивается.

2. В языках с написанием слева направо статическим положением заменяется значение auto свойства left. В языках с написанием справа налево статическим положением заменяем значение auto для свойства right.

3. Если или left, или right все еще имеют значение auto (иначе говоря, оно не было заменено на предыдущем шаге), заменяем нулем значение auto любого из свойств margin-left или margin-right.

4.


Если на данный момент оба свойства, margin-left и margin-right, все еще имеют значения auto, уравниваем их, таким образом центрируя элемент в его блоке-контейнере.

5. И наконец, если осталось всего одно значение auto, меняем его так, чтобы уравнять оставшуюся часть уравнения.

В результате поведение макета в основном будет таким же, как то, которое мы наблюдали для абсолютно позиционированных незамещаемых элементов, когда предполагали, что ширина незамещаемого элемента задана явно. Поэтому следующие два элемента будут иметь одинаковую ширину и размещение (ширина изображения составляет 100 пикселов:

a frowny face style="position: absolute; top: 0; left: 50px; margin: 0;">
it's a div!



Как и в случае незамещаемых элементов, если значения сверхограничены, агент пользователя обязан игнорировать значение свойства right в языках с написанием слева направо и значение свойства left в языках с написанием справа налево.


Таким образом, в следующем примере объявленное значение right переопределяется вычисляемым значением 50px:

a frowny face style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px;
margin: 0;">


Аналогично компоновка вдоль вертикальной оси подчиняется ряду правил, которые утверждают:

1. Если для свойства height задано значение auto, то вычисляемое значение высоты определяется собственной высотой содержимого элемента. Таким образом, вычисляемое значение height для изображения 50 пикселов высотой составляет 50px. Если высота объявлена явно (т. е. что-то вроде 100px или 50%), то свойству height присваивается это значение.

2. Если top имеет значение auto, заменяем его статическим положением замещаемого элемента.

3. Если bottom имеет значение auto, заменяем любое значение auto свойств margin-top или margin-bottom нулем.

4. Если на данный момент и margin-top, и margin-bottom все еще имеют значение auto, уравниваем их, таким образом центрируя элемент в его блоке-контейнере.

5.


И наконец, если осталось всего одно значение auto, меняем его так, чтобы уравнять оставшуюся часть уравнения.

Как и в случае незамещаемых элементов, если значения сверхограничены, агент пользователя обязан игнорировать значение свойства bottom. Таким образом, результат применения следующей разметки был бы таким:

one style="position: absolute;
top: 0; left: 0; margin: 0;"> two style="position: absolute;
top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">  three style="position: absolute;
left: 0; width: 100px; margin: 10px; bottom: 0;">  four style="position: absolute;
top: 0; height: 100px; right: 0; width: 50px;"> five style="position: absolute;
top: 0; left: 0; bottom: 0; right: 0; margin: auto;">


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

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