Поведение на практике

Только что рассмотренные нами правила имеют ряд интересных последствий, являющихся как результатом того, о чем в них говорится, так и того, что в них не сказано. В первую очередь обсудим, что происходит, когда перемещаемый элемент располагается выше своего родительского элемента. Кстати, это встречается довольно часто. Возьмем, к примеру, короткий документ, состоящий из нескольких абзацев и элементов h3, в котором первый абзац содержит перемещаемое изображение. Более того, поле перемещаемого изображения равно пяти пикселам (5px). Можно было бы ожидать, что визуальное представление документа будет таким. Конечно, в этом нет ничего необычного, что произойдет, если задать фон для первого абзаца.

Второй пример отличается только наличием видимого фона. Как видите, перемещаемое\ изображение снизу выходит за границу родительского элемента. Конечно, это же имело место и в первом примере, но не было таким очевидным, потому что вы не видели фон. Правила перемещения, обсуждаемые нами ранее, касались только левого, правого и верхнего краев перемещаемых элементов и их родителей. Намеренное игнорирование нижнего края вызывает поведение. На практике некоторые броузеры делают это некорректно.


Они увеличивают высоту родительского элемента до тех пор, пока перемещаемый элемент не поместится в него полностью, даже несмотря на то, что это приводит к возникновению значительного пустого пространства в родительском элементе. CSS2.1 проясняет один из аспектов поведения перемещаемых элементов: перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков. (Предыдущие версии CSS не давали четкого определения того, что должно происходить.) Таким образом, можно вместить перемещаемый элемент в его родительский элемент, делая его перемещаемым, как в этом примере:

Этот 'div' распространится вокруг перемещаемого изображения, потому что
'div' тоже стал перемещаемым.


Для сравнения рассмотрим фон и его взаимоотношения с перемещаемыми элементами, которые встречаются в документе раньше. Перемещаемые элементы находятся как внутри, так и вне потока; такие вещи будут случаться. Что происходит? Содержимое заголовка «вытесняется» перемещаемым элементом. Но ширина элемента заголовка остается равной ширине его родительского элемента. Следовательно, его область содержимого распространяется на ширину родителя, то же самое делает и фон. В действительности содержимое не занимает всей своей области содержимого и не перекрывается перемещаемым элементом.

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

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