Нормальный поток
ПРИМЕР
ЧТО ПРОИЗОЙДЕТ, ЕСЛИ УМЕНЬШИТЬ ШИРИНУ КОНТЕЙНЕРОВ DIV?
Позиционирование на основе плавающих элементов
ПРИМЕР
УПРАЖНЕНИЯ:
- Что произойдет, если убрать указание ширины контейнеров?
- Добавьте третий контейнер, добейтесь размещения всех контейнеров в один горизонтальный ряд.
- Что произойдет, если упаковать все div-контейнеры в еще один div-контейнер?
Абсолютное позиционирование
Центрирование элементов на странице
Центрирование по горизонтали
Центрирование по вертикали
Относительное позиционирование
Фиксированное позиционирование
ПРИМЕР
УПРАЖНЕНИЕ: переместите фиксированный блок в правую часть страницы.
Необходимо ответить на вопрос и задать свой по материалу лекции. Вот первый вопрос.
Как достичь центрирования элемента на странице и по горизонтали и по вертикали?
Центрирование по горизонтали:
1.блочного элемента
-margin-left:auto;
-margin-:right:auto;
-wigth:…
2.Строковый можно переделать в блочный
-display:block;
-поместить в блочный элемент
При неизвестной ширине блочного контейнера, для его центрирования необходимо
1. Задать свойство display:table;
2. Задать автоматические отступы справа/слева margin-right/left
Для вертикального центрирования
1. Позиционируют блок абсолютно левым верхним углом в центр экрана
Position:absolute;
Top:50%;
Left:50%;
2. Смещают влево и вверх путем задания отрицательных отступов
Margin-left:-10px;
Margin-top:-15px;
Позиционирование на основе плавающих элементов?
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом.
Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:
обтекание картинок текстом;
создание врезок;
горизонтальные меню;
колонки
Обтекание происходит с помощью стилевого свойства float со значением left или right. По умолчанию обтекание для элементов не устанавливается, но если это по каким-либо причинам необходимо указать явно, следует использовать значение none.
Фиксированное позиционирование?
Position: fixed;
top, left, right, bottom
Фиксированные элементы остаются на месте при прокрутке страницы
Особенности CSS3.
Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.
Наложение элементов?
z-index: k, где k принадлежит множеству N и {0};
Уменьшение контейнеров DIV.
К примеру:
Мы задаем ширину изображению, равную ширине контейнера div. Благодаря этому, если уменьшается div, то уменьшается img.
Абсолютное позиционирование?
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью».
Относительное позиционирование?
Значение relative обозначает «относительное позиционирование». При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно «родительского» элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.
Что произойдет, если упаковать все div-контейнеры в еще один div-контейнер?
Они приобретут свойства div-контейнера, в который были перемещены.
Свойство float.
«Float» — одно из CSS свойств блочного элемента разметки, благодаря которому HTML элемент смещается в крайнее, доступное для размещения, левое или правое положение внутри содержащего этот элемент контейнера. Если в текущей строке контейнера по ширине не хватает места для его размещения, он смещается на следующую строку до тех пор, пока не сможет разместиться. Замечу, что ширина float элемента определяется его содержимым. В зависимости от установленного значения float, строчные элементы могут обтекать такой блочный элемент по одной из его горизонтальных сторон.
Свойство float может принимать следующие значения: none(по умолчанию), left, right и inherit.