Позиционирование и использование свойства Float

Самый большой вопрос, который снова и снова задают себе все, кто пользуется CSS - это "Как мне поставить этот дурацкий элемент именно туда, куда я хочу?!". Обычно ответ лежит в использовании свойства float и/или атрибутов позиционирования в комбинации с марджинами. Необходимо развивать мысленную модель (mental model) того, что происходит на странице, когда вы применяете к элементам Float или используете различные типы позиционирования.

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

Пункты для размышления

  • Что такое DOM?
  • Как размещаются элементы внутри DOM по умолчанию?
  • Как переопределить позиционирование элемента с использованием атрибута position?
  • Когда вы можете использовать атрибуты top, left, right и bottom?
  • Какая разница между float и position?
  • Какой элемент ведет себя как родительский по отношению к плавающему элементу?
  • Какая разница между float: left и float: right?
  • Что произойдет, если у вас есть набор плавающих элементов, при этом они расположены друг за другом, и вы уменьшаете размер окна браузера?
  • Какова практическая разница между относительным (relative) и абсолютным (absolute) позиционированием?
  • Какой элемент ведет себя как родительский по отношению к асолютно или относительно позиционированному элементу?
  • Как можно построить сетку из 20х20 блоков на странице с помощью использования свойства float? С помощью списков?
  • Для чего могут пригодиться отрицатильные марджины?

Задание

  1. Прочитайте о CSS-свойстве float на сайте A List Apart
  2. Прочитайте о позиционировании в CSS на сайте A List Apart
  3. Поиграйте с Уроком по позиционированию - виджетом от BarelyFitz Designs, чтобы увидеть разницу между различными схемами позиционирования.
  4. Прочитайте о свойстве float и позиционировании на htmlbook на русском.

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.

Поделиться уроком: