Слайд 4Блочная верстка

Слайд 5Табличная верстка

Слайд 6Блочная верстка

Слайд 7Блочная верстка
- является блочным элементом и предназначен для выделения фрагмента

Слайд 8

Слайд 9

Слайд 10

Слайд 11float

Left - Выравнивает элемент по левому краю, а все остальные элементы,

Слайд 12Пример
 float:left;
 нижняя граница предыдущего плавучего блока
А если высота первого пункта оказалась

Слайд 13position
Absolute - абсолютно позиционирован, при этом другие элементы отображаются на веб-странице

Слайд 14fixed
привязывается к указанной свойствами left, top, right и bottomточке на экране и не меняет своего положения

Слайд 15relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента

Слайд 16static
Элементы отображаются как обычно. Использование свойств  left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует

Слайд 17z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в

Слайд 18z-index: число | auto | inherit
Число - Чем больше значение, тем

Слайд 19Пример
Слой 1 наверху
Ссылка 1
Ссылка

Слой 4 наверху

#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }

#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительное позиционирование */

Слайд 20Пример

.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;

Слайд 21Пример
Жесткая HTML & CSS верстка блоками

Слайд 22Пример
Резиновая HTML & CSS верстка блоками

Слайд 23Flexbox
Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок)

Слайд 24Оси

Слайд 25Оси

Слайд 26

Слайд 27

Слайд 28

Слайд 29display: flex | inline-flex;
Применяется к: родительскому элементу flex-контейнера.
Определяет flex-контейнер (инлайновый или блочный

Слайд 30

Слайд 31Пример
HTML

Я ПЕРВЫЙ
Я ВТОРОЙ
Я ТРЕТИЙ

.flex {
height:640px;
}
.flex div {
float:left;
background:#039;
border-radius:5px;
padding:5px;
margin-left:10px;
}
.flex div:first-child {
background:#090;
}
.flex div:last-child {
background:#C00;
}

Слайд 32Включим flexbox
.flex {
height:640px;
display:flex;
}

Слайд 33

Слайд 34Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:row-reverse;
}

Слайд 35Поворачиваем саму ось
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column;
}

Слайд 36Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column-reverse;
}

Слайд 37

Слайд 38Пример
.flex {
height:640px;
display:flex;
background: #838283;
}
.flex {

Слайд 39

Слайд 40Пример
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:flex-end;
}
.flex {

Слайд 41Перестановка
Применяется к: дочернему элементу
order:

Слайд 42.flex div:first-child {
background:#090;
order:2;
}
.flex div:last-child {
background:#C00;
order:1;

Слайд 43flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости.
flex-grow:

Слайд 44flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости.
flex-basis-

Слайд 45Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу)
.flex div:nth-child(2) {
flex-grow:1;
align-self:flex-start;

Слайд 46

Слайд 47Читать
Поддержка Flexbox в браузерах
Таблица соответствия F09 и F11
Таблица соответствия F09 и

Слайд 48Задание

Слайд 49Вопросы