Авторский знак. 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 29
30 31


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

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

(продолжение)

Свободно размещаемым элементам в CSS запрещено выходить за рамки тех элементов, которые их содержат, если они вмещаются в эти элементы по ширине. Это предотвращает накапливание идущих подряд свободно размещаемых элементов у края и «расползание» за пределы охватывающего блока. Как только стек элементов приобретает недопустимую ширину, элемент, который не умещается, опускается ниже. При условии полного соблюдения ограничений свободно размещаемые объекты должны располагаться настолько близко к левому или с учетом стиля к правому краю, а также настолько сдвинуты вверх, насколько это возможно без появления нарушений. Заметим: расположение элемента выше по вертикали более предпочтительно, чем размещение левее или правее. Свободно размещаемыми объектами удобно манипулировать, поразному организуя их положение, передвигая их вверх и в стороны до тех пор, пока они не столкнутся с краями охватывающего блока, другим свободно размещаемым элементом, «потолком», заданным наличием предыдущего блочного элемента, или чем-то подобным.

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

Отрицательные значения отступа и перекрытие элементов в CSS.

Два главных правила размещения свободно располагаемых объектов гласят: объект никогда не должен выходить за пределы области содержимого охватывающего блока или перекрывать собой другие элементы страницы. Но при задании отрицательных отступов свободно размещаемого объекта, оба правила нарушаются:

                            img { 
                                 float: left; margin: -15рх; 
                                 }

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


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

Пропуск размещаемых элементов в CSS.

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

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

                      	left
                        right
                        both
                        none
                        inherit

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

Свойство clear в CSS применимо лишь в отношении элементов уровня блока. Лучше всего показать это на несложном примере. Значение свойства left позиционирует данный элемент ниже, чем любой элемент, прижатый к левому краю охватывающего блока. Описанное в этом примере правило гарантирует, что заголовки второго уровня начинаются в документе ниже, чем расположенные у левого края свободно размещенные элементы:

                       img {
                             float: left; margin-right: 15рх;
                             }
                             
                       h2 {
                              clear: left; top-margin: 1.5em;
                              }

Заголовок второго уровня.

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


Как Вы можете догадаться, аналогично работает и значение right в CSS, предотвращающее появление элемента рядом с размещенными справа. Значение both в CSS смещает элемент вниз, пока не будут пропущены свободно размещенные элементы справа и слева. Спецификация CSS требует от пользовательских агентов добавлять дополнительные промежутки над отступами элементов уровня блока, пока верхний край содержимого не окажется ниже свободно размещаемого объекта.


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
... ... ...

обратно    назад    дальше     вперед

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