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


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

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

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

Как уже не раз говорили, что свойство float работает не только с изображением, но и с любым элементом (абзац, список, элемент div и т.д.).

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

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

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

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

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

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

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

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


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

Спецификация каскадных таблиц стилей 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
... ... ...

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

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