🗊Презентация Блоки

Категория: Интернет
Нажмите для полного просмотра!
Блоки, слайд №1Блоки, слайд №2Блоки, слайд №3Блоки, слайд №4Блоки, слайд №5Блоки, слайд №6Блоки, слайд №7Блоки, слайд №8Блоки, слайд №9Блоки, слайд №10Блоки, слайд №11Блоки, слайд №12
Скачать
Вы можете ознакомиться и скачать презентацию на тему Блоки. Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


V. Блоки Схемы позиционирования Область просмотра и область страницы Модель областей CSS Контейнеры областей Ширина и отступы блочных областей Переполнение Относительное позиционирование
Описание слайда:
V. Блоки Схемы позиционирования Область просмотра и область страницы Модель областей CSS Контейнеры областей Ширина и отступы блочных областей Переполнение Относительное позиционирование

Слайд 2


Схемы позиционирования Нормальный поток (normal flow) position: static; Относительное позиционирование (relative positioning) position: relative; Обтекаемые элементы (floats) float: left; или float: right; Абсолютное позиционирование (absolute positioning) position: absolute; Фиксированное позиционирование position: fixed;
Описание слайда:
Схемы позиционирования Нормальный поток (normal flow) position: static; Относительное позиционирование (relative positioning) position: relative; Обтекаемые элементы (floats) float: left; или float: right; Абсолютное позиционирование (absolute positioning) position: absolute; Фиксированное позиционирование position: fixed;

Слайд 3


Область просмотра и область страницы
Описание слайда:
Область просмотра и область страницы

Слайд 4


Модель областей CSS область (box) background = content + padding + border
Описание слайда:
Модель областей CSS область (box) background = content + padding + border

Слайд 5


Контейнер Контейнер (containing block) области — прямоугольник, в котором обитает данная область Многие параметры области (width, height, padding, margin и др.) рассчитываются относительно её контейнера Для областей в нормальном потоке (position: static; или position: relative;) контейнер — поле содержания (content) области ближайшего блочного предка (display — block, list-item, table, table-cell и др.) Для области корневого элемента (html) контейнер — область просмотра (viewport)
Описание слайда:
Контейнер Контейнер (containing block) области — прямоугольник, в котором обитает данная область Многие параметры области (width, height, padding, margin и др.) рассчитываются относительно её контейнера Для областей в нормальном потоке (position: static; или position: relative;) контейнер — поле содержания (content) области ближайшего блочного предка (display — block, list-item, table, table-cell и др.) Для области корневого элемента (html) контейнер — область просмотра (viewport)

Слайд 6


Размеры блочных областей width — ширина поля содержания (content): em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера) auto — зависит от других свойств height — высота поля содержания (content): auto — определяется содержанием em (1em = кегль шрифта текущей области) проценты (относительно высоты контейнера, если она — не auto) для корневого элемента (html) — относительно области просмотра (viewport) min-width, max-width, min-height, max-height
Описание слайда:
Размеры блочных областей width — ширина поля содержания (content): em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера) auto — зависит от других свойств height — высота поля содержания (content): auto — определяется содержанием em (1em = кегль шрифта текущей области) проценты (относительно высоты контейнера, если она — не auto) для корневого элемента (html) — относительно области просмотра (viewport) min-width, max-width, min-height, max-height

Слайд 7


Отступы блочных областей padding — внутренний отступ em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера, даже padding-top и padding-bottom) отрицательные значения не применяются margin — внешний отступ em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера, даже margin-top и margin-bottom) допускаются отрицательные значения auto — зависит от других свойств вертикальные отступы перекрываются
Описание слайда:
Отступы блочных областей padding — внутренний отступ em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера, даже padding-top и padding-bottom) отрицательные значения не применяются margin — внешний отступ em (1em = кегль шрифта текущей области) проценты (относительно ширины контейнера, даже margin-top и margin-bottom) допускаются отрицательные значения auto — зависит от других свойств вертикальные отступы перекрываются

Слайд 8


Рамки блочных областей border: толщина стиль цвет; порядок значений не важен значения можно пропускать толщина: em (1em = кегль шрифта текущей области), px и др. проценты не применяются стиль: none, solid, double, dotted, dashed, ridge, groove, inset, outset цвет: по умолчанию принимает значение color допускается значение transparent
Описание слайда:
Рамки блочных областей border: толщина стиль цвет; порядок значений не важен значения можно пропускать толщина: em (1em = кегль шрифта текущей области), px и др. проценты не применяются стиль: none, solid, double, dotted, dashed, ridge, groove, inset, outset цвет: по умолчанию принимает значение color допускается значение transparent

Слайд 9


Ширина и отступы блочных областей формула для применяемых значений (used values):
Описание слайда:
Ширина и отступы блочных областей формула для применяемых значений (used values):

Слайд 10


Значение auto для width и margin
Описание слайда:
Значение auto для width и margin

Слайд 11


Свойство overflow — переполнение Применение: незамещаемые блочные элементы (display — block, list-item, table) ячейки таблиц (display: table-cell) Область переполнения = content + padding Значения: visible hidden scroll auto Свойства overflow-x, overflow-y (CSS 3)
Описание слайда:
Свойство overflow — переполнение Применение: незамещаемые блочные элементы (display — block, list-item, table) ячейки таблиц (display: table-cell) Область переполнения = content + padding Значения: visible hidden scroll auto Свойства overflow-x, overflow-y (CSS 3)

Слайд 12


Относительное позиционирование position: relative; область остаётся в нормальном потоке свойства left, right, top, bottom — смещение области начальное значение — auto вычисленные значения: left = −right; top = −bottom
Описание слайда:
Относительное позиционирование position: relative; область остаётся в нормальном потоке свойства left, right, top, bottom — смещение области начальное значение — auto вычисленные значения: left = −right; top = −bottom

Скачать

Теги Блоки
Похожие презентации
Mypresentation.ru
Загрузить презентацию