Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Свободное размещение





Именно ради этой возможности и создано свойство float. В CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение. Свободное размещение – это не схема выбора положения, а уникальная функция с интересными проявлениями.

Свободное размещение полезно не только, чтобы иногда «прижимать» к краю рисунки. На деле это один из основных инструментов современного Web-дизайна, основанного на технологии CSS. Свободным размещением элементов пользуются для построения документов с несколькими колонками; панелей навигации из ненумерованных списков; выравнивания, напоминающего таблицу, но не являющуюся таковой, и т.д.

Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство float.

Значения: left right none inherit. Начальное значение: none

Применимо: Ко всем элементам.

В этом простом примере свойство float используется, чтобы прижать изображение вправо

img {float: right; margin: 20px; }

Замечание. Свойство float элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace.

Свободно размещенные элементы не входят в поток нормального расположения документа, однако они влияют на прочие элементы структуры, когда те форматируются для вывода. Используя аналогию, можно сказать, что они схожи с «островами» в потоке, не подчиняясь ему и заставляя его «обтекать» их самих. Свободно размещенные элементы в этом отношении уникальны, поскольку, будучи вне потока, обычно не могут влиять на элементы внутри него.

Результат вывода вскрывает основные аспекты свободного размещения элементов:

• Любые свободно размещенные элементы близки по поведению к блокам. Такого эффекта можно добиться, указав display: block (хотя сама такая запись необязательна).

• При размещении текстовых элементов нужно задавать шири­ну (width). Без этого прямоугольник вывода содержимого может сжаться до ми­нимально возможного.

• Свободно размещаемый элемент располагается внутри зоны вывода содержимого охватывающего блока (ближайшего к элементу блочного элемента-родителя) и ни­когда не выходит в зону, отведенную заполнению.

• Элемент свободно размещается целиком, а соседнее содержимое «обтекает» его.

• В отличие от обычных отступы вокруг свободно размещаемых элементов никогда не сжимаются (даже по вертикальной оси).

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

img { float: left; }

p.boxed { background-color: #999; border: solid 2px #333; }

Свободно размещенные элементы, находящиеся поблизости в документе-источнике, не могут друг друга перекрывать. Взамен же правилами предписано:

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

• Если для размещения элементов бок о бок недостаточно места, второй из элементов отодвигается вниз, пока освободившегося пространства не хватит для его вывода без перекрытия первого.

Текст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Екст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

 

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







Дата добавления: 2014-11-12; просмотров: 602. Нарушение авторских прав; Мы поможем в написании вашей работы!




Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...


ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...


Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...


Логические цифровые микросхемы Более сложные элементы цифровой схемотехники (триггеры, мультиплексоры, декодеры и т.д.) не имеют...

Принципы резекции желудка по типу Бильрот 1, Бильрот 2; операция Гофмейстера-Финстерера. Гастрэктомия Резекция желудка – удаление части желудка: а) дистальная – удаляют 2/3 желудка б) проксимальная – удаляют 95% желудка. Показания...

Ваготомия. Дренирующие операции Ваготомия – денервация зон желудка, секретирующих соляную кислоту, путем пересечения блуждающих нервов или их ветвей...

Билиодигестивные анастомозы Показания для наложения билиодигестивных анастомозов: 1. нарушения проходимости терминального отдела холедоха при доброкачественной патологии (стенозы и стриктуры холедоха) 2. опухоли большого дуоденального сосочка...

Реформы П.А.Столыпина Сегодня уже никто не сомневается в том, что экономическая политика П...

Виды нарушений опорно-двигательного аппарата у детей В общеупотребительном значении нарушение опорно-двигательного аппарата (ОДА) идентифицируется с нарушениями двигательных функций и определенными органическими поражениями (дефектами)...

Особенности массовой коммуникации Развитие средств связи и информации привело к возникновению явления массовой коммуникации...

Studopedia.info - Студопедия - 2014-2024 год . (0.011 сек.) русская версия | украинская версия