Позиционирование
Хаки с margin
Важно всегда задавать элементу body нулевой margin, иначе вокруг него будет рамка из отступов. Она не критична до тех пор, пока фоновый цвет элементов, лежащих внутри, остается белым, но как только мы его меняем, отступ становится виден.
Всегда задаем body{margin: 0;}
Для того, чтобы отцентрировать текст внутри блока, нужно применить text-align: center для этого блока div. Попросите ребят записать себе в тетрадь основные режимы выравнивания: по левому краю, по правому краю и по центру + соответствующие CSS-правила:
- center - выравнивание по центру;
- left - по левому краю;
- right - по правому краю;
- justify - по ширине.
Горизонтальное центрование блока
margin: auto;
Понятие потока
Поток документа - это порядок отображения элементов на веб-странице. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Позиционирование в CSS
Для задания позиции элемента на сайте могут использоваться 4 правила: top, bottom, left, right в определенных сочетаниях.
Статическое позиционирование
Браузер самостоятельно высчитывает позицию элемента на основании потока.
position: static; (по умолчанию).
Координаты вычисляются автоматически, top, bottom, left и right игнорируются.
Место в потоке: выделяется соответственно размерам блока.
Относительное позиционирование
position: relative;
Координаты вычисляются: относительно нормальной позиции в потоке.
Место в потоке: выделяется соответственно размерам блока.
Абсолютное позиционирование
position: absolute;
Координаты вычисляются: относительно ближайшего спозиционированного родителя.
Место в потоке: не выделяется.
Фиксированное позиционирование
Алгоритм работы position:fixed идентичен алгоритму работы position:absolute за исключением того, что элемент фиксируется и остается на своем месте даже при прокрутке страницы.