Блоки - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Блоки. Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

Схемы позиционирования Нормальный поток (normal ﬂow) position: static; Относительное позиционирование (relative positioning) position: relative; Обтекаемые элементы (ﬂoats) ﬂoat: left; или ﬂoat: right; Абсолютное позиционирование (absolute positioning) position: absolute; Фиксированное позиционирование position: ﬁxed;

Слайд 3

Описание слайда:

Область просмотра и область страницы

Слайд 4

Описание слайда:

Модель областей 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)

Слайд 6

Описание слайда:

Размеры блочных областей 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 — зависит от других свойств вертикальные отступы перекрываются

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

Значение auto для width и margin

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Теги Блоки

Похожие презентации