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

Содержание

Слайд 2

План урока

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

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

Слайд 3

Свойство display

Свойство display

Слайд 4

Значения свойства display

none (скрыть).
block (блочный).
inline (строчный).

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

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

Слайд 5

Значение inline-block

Элемент находится в строке, но при этом ему может быть задано

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

Слайд 6

Значение inline-block

Можно задавать свойства width, height.
Является частью строки.
Размер устанавливается по содержимому, если

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

Слайд 7

Значение table-cell

Внутри ячеек действует свойство vertical-align.
Не требует структуры таблицы (table, table-row).
Ведет себя

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

Слайд 8

Значение flex

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

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

Слайд 9

Значение flex

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

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

Слайд 10

Основы flexbox

Основы flexbox

Слайд 11

Синтаксис CSS

Главная ось (main axis) и перпендикулярная ось (cross axis).
Начало (main-start) и

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

Слайд 12

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

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

Слайд 13

Ширина и высота элемента

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

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

Слайд 14

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

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

Слайд 15

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


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

Слайд 16

Ответ

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

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

Слайд 17

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

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

Слайд 18

Что такое позиционирование?

Позволяет точно определить, где появятся блоки относительно окна браузера или

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

Слайд 19

Position

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

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

Слайд 20

Свойства смещения

left: 20px;
right: 50px;
top: 25em;
bottom: 60%;

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

Слайд 21

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

Практическое задание
Имя файла: Презентация_5_HTML_CSS_Формирование_блочной_модели.pptx
Количество просмотров: 40
Количество скачиваний: 0