Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Свободное размещение и позицирование в CSS.

В каскадных таблицах стилей CSS заложены возможности не толко дизайнерского оформления страниц сайта, но при помощи спецификации CSS можно задавать базовой структуры страницы и описания множественных столбцов, способов переноса текста в строках и даже выбора положения;

Вот, посмотрите на свободноетразмещение (floating) и еще на позиционирование (positioning);

                         bottom	
                         overflow 
                         top 
                         clip 
                         left 
                         visibility 
                         right 
                         z-index 
                         float 
                         clear 
                         position 
                         bottom.

Нормальный поток в CSS.

Что означает "нормальный поток" (normal flow) элементов, образующих документ? В так называемом нормальном потоке текстовые элементы страницы располагаются сверху вниз и слева направо для языков, в которых читают слева (или справа налево для языков, в которых читают справа). Об этом мы уже с Вами говорили и кое-что нам известно. По умолчанию текст просматривается слева направо и сверху вниз. Входя в нормальный поток, блочные элементы располагаются друг над другом, а встроенные заполняют доступное для них место. При изменении окна браузера блочный элемент расширяется или сужается, а содержимое элемента форматируется с учетом изменившейся ширины. В так называемой модели "нормальный поток" объект влияет на положение соседних элементов, которые окружают его на страницах сайта. При размещении по правилам каскадных таблицах стилей CSS блоки делятся на входящие в нормальный поток и не подхваченным этим потоком, то есть не включненным нормальным потоком. Выбор в пользу свободного размещения или позиционирования меняет связь элементов с этим потоком.

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

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

Свойство float в CSS. Значения:

left right none inherit

Начальное значение: none Применимо: Ко всем элементам. Наследуется: Нет.

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

                         img {
                              float: right; margin: 20px;
                              }
                         < p img src="img/../fon/065.gif">Cвойство float элемента img
                            фактически подменяет признанный устаревшим align. Атрибут
                            margin в этом примере играет роль также устаревших hspace
                            и vspace. Преимуществом  поля margin является возможность 
                            задавать разные отступы вдоль каждой стороны иллюстрации 
                            (отступ, определявшийся hspace слева, был равен отступу
                            справа, а отступ, заданный vspace сверху, был равен отступу 
                            снизу). Для расширения пространства вокруг свободно размещенного
                            элемента дополнительно можно использовать заполнение. Свободно 
                            размещенные элементы не входят в поток нормального расположения 
                            документа, однако они влияют на прочие элементы.< /p>;  

Cвойство float в CSS элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace. Преимуществом поля margin является возможность задавать разные отступы вдоль каждой стороны иллюстрации (отступ, определявшийся hspace слева, был равен отступу справа, а отступ, заданный vspace сверху, был равен отступу снизу). Для расширения пространства вокруг свободно размещенного элемента дополнительно можно использовать заполнение. Свободно размещенные элементы не входят в поток нормального расположения документа, однако они влияют на прочие элементы.

Cвойство float элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace. Преимуществом поля margin является возможность задавать разные отступы вдоль каждой стороны иллюстрации (отступ, определявшийся hspace слева, был равен отступу справа, а отступ, заданный vspace сверху, был равен отступу снизу). Для расширения пространства вокруг свободно размещенного элемента дополнительно можно использовать заполнение. Свободно размещенные элементы не входят в поток нормального расположения документа, однако они влияют на прочие элементы.


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


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: