Презентация_5_HTML_CSS_Формирование_блочной_модели

План урока
Свойство display.
Формирование блочной модели.
Позиционирование блоков.

Свойство display

Значения свойства display
none (скрыть).
block (блочный).
inline (строчный).
inline-block (строчно-блочный).
table-cell (ячейка таблицы).
flex (гибкий).

Значение inline-block
Элемент находится в строке, но при этом ему может быть задано значение ширины и высоты.

Значение inline-block
Можно задавать свойства width, height.
Является частью строки.
Размер устанавливается по содержимому, если не заданы значения ширины и высоты.
Элемент всегда прямоугольный.

Значение table-cell
Внутри ячеек действует свойство vertical-align.
Не требует структуры таблицы (table, table-row).
Ведет себя как ячейка таблицы, то есть подстраивается под размер содержимого.

Значение flex
Наделение контейнера способностью изменять ширину или высоту для поддержки всех видов дисплеев и разных разрешений экранов.

Значение flex
Элементы могут сжиматься и растягиваться, занимая необходимое пространство.
Возможно выравнивание не только по вертикали, но и по горизонтали.
Элементы могут автоматически выстраиваться в несколько строк.
Возможность формирования блоков справа налево.

Основы flexbox

Синтаксис CSS
Главная ось (main axis) и перпендикулярная ось (cross axis).
Начало (main-start) и конец (main-end) направления главной оси.
main size и cross size – ширина или высота flex-элемента.
cross-start и cross-end – начало и конец вертикальной оси.

Формирование блочной модели

Ширина и высота элемента
Содержимое (width, height).
Внутренний отступ (padding).
Рамка (border).
Внешний отступ (margin).

Блочная модель
margin: 25px 10px;
border: 5px solid black;
padding: 10px;
width: 200px;
height: 100px;

Рассчитать размер

Ответ
Ширина: 250px;
Высота: 180px;

Позиционирование блоков

Что такое позиционирование?
Позволяет точно определить, где появятся блоки относительно окна браузера или других объектов на веб-странице.

Position
static – нормальное (по умолчанию).
relative – относительное.
absolute – абсолютное.
fixed – фиксированное.
inherit – наследует значение родителя.

Свойства смещения
left: 20px;
right: 50px;
top: 25em;
bottom: 60%;

Практическое задание