Модель отображения. Часть 1

Мохов Олег
Разработчик интерфейсов

Всё есть квадраты прямоугольники

Визуальная модель форматирования

Что это такое?

Алгоритм, который используется для обработки и отображения визуального представления документа. Это базовый концепт CSS. Каждый элемент документа трансформируется 0, 1 или более box'ов в соответствие с боксовой моделью CSS.

MDN::Visual formatting model

Положение бокса

размер бокса: определен ли, ограничен или никак не задан
тип бокса: inline, block, и т.п
положение относительно других элементов в дереве: соседей или детей
размер и положение viewport'а
внутренние пропорции (картинки, видео)
схема позиционирования: поток, float или абсолютная

Создание боксов

Боксы блочного уровня

Элемент рендерится как блок (близкая аналогия – параграф)
Элементы блочного уровня выстраиваются сверху внизу
Элемент блочного уровня участвует в блочном контексте форматирования
Элемент блочного уровня генерирует главный бокс блочного уровня и в некоторых случаях дополнительные (например list-item генерирует бокс для буллета)
Участвующий в блочном контексте форматирования элемент может создать вокруг себя анонимный блочный бокс

Анонимные боксы


Some inline
text followed
by a paragraph
followed by
more inline text.

Some inline text

followed by a paragraph

followed by more inline text.

Боксы блочного уровня по-умолчанию

p
div
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
fieldset
form
hr
table
display: block, list-item, table, flex...

Математика block элементов

margin + border + padding + content-width = width содержащего блока

content-width ≠ width

margin + border + padding + width = width содержащего блока при content-box

margin + border + width = width содержащего блока при padding-box

margin + width = width содержащего блока при border-box

margin + border + padding + height ≠ height содержащего блока

Ширина и высота


div {
    width: 200px;
    height: 200px;
}

Ширина и высота


div {
    width: 400px;
    height: 200px;
}

Ширина и высота


div {
    width: 400px;
    height: 100px;
}

Ширина и высота


div {
    width: 400px;
    height: 100px;
}
div div {
}

Не устроить ли нам рок-фестиваль огромный

Ширина и высота


div {
    width: 400px;
    height: 100px;
}
div div {
    margin: 0 20px;
}

Не устроить ли нам рок-фестиваль огромный

Ширина и высота


div {
    width: 400px;
    height: 100px;
}
div div {
    margin: 0 20px;
}

Не устроить ли нам рок-фестиваль огромный, Чтобы было круто, весело и громко? Чтоб километров на 20 разносили колонки Крики Васильева Санька и Билыка Ромки?

Ширина и высота


div {
    width: 400px;
    height: 100px;
}
div div {
    height: 100px;
    margin: 0 20px;
}

Ширина и высота


div {
    width: 400px;
    height: 100px;
}
div div {
    height: 100px;
    margin: 0 20px;
    width: 800px;
}

Ширина и высота


div {
    height: 100px;
}
div div {
    height: 100px;
    margin: 0 20px;
    max-width: 800px;
}

margin/padding


div {
    width: 800px;
}
div div {
    margin: 20px;
    padding: 50px;
}

Поставим звука мегаватт, дабы без ума был рад Чрезвычайно важный молодёжный электорат, И айда, в тур по городам, сегодня тут, завтра – там, Москва, Питер, Новосиб, Волгоград…

margin/padding

        TOP    RIGHT   BOTTOM   LEFT
margin: 2px    30px    400px    5000px;
margin: 2px    30px    400px /* 30px */;
margin: 2px    30px /* 2px      30px */;
margin: 2px /* 2px     2px      2px  */;

margin/padding

margin: 2px 30px 400px 5000px;
margin-top: 2px;
margin-right: 30px;
margin-bottom: 400px;
margin-left: 5000px;

ширина считаются относительно ширины содержащего блока

высота считается относительно высоты содержащего блока, но только если она задана явно

margin-left/right и padding-left/right считаются относительно ширины содержащего блока

высота содержащего блока (если не задана) = сумма места, занимаемого его детьми

margin-top/bottom и padding-top/bottom считаются относительно ширины содержащего блока


div div {
    height: 50%;
    width: 50%;
}

Здоровый дух в здоровом теле, бывает редко. Душа умеет летать, плоть – клетка.


div {
    height: 400px;
}
div div {
    height: 50%;
    width: 50%;
}

Здоровый дух в здоровом теле, бывает редко. Душа умеет летать, плоть – клетка.


div div {
    margin: 10%;
    padding: 10%;
}

Здоровый дух в здоровом теле, бывает редко. Душа умеет летать, плоть – клетка.

Граница

border


border: <размер> <тип> <цвет>;
border-left: <размер> <тип> <цвет>;
border-width: <размер> <размер> <размер> <размер>;
border-type: <тип> <тип> <тип> <тип>;
border-color: <цвет> <цвет> <цвет> <цвет>;
border-left-width: <размер>;
border-left-type: <тип>;
border-left-color: <цвет>;

border


div {
    border: 20px dotted blue;
}

border


div {
    border: 20px dashed blue;
}

border


div {
    border: 20px solid blue;
}

border


div {
    border-width: 20px;
    border-style: solid;
    border-color: blue red;
}

border


div {
    border-width: 20px 40px;
    border-style: solid dashed dotted;
    border-color: blue red;
}

Немного о математике блочных элементов

margin + border + padding + width =
width содержащего блока
margin + width =
width содержащего блока - border - padding
border/padding: либо заданы, либо auto = 0
если margin-left не задан, значит он равен 0, если margin-left задан в auto, то он вычисляется
width либо задан, либо вычисляется
margin-right вычисляется всегда, если заданы width и margin-right

margin + width = width содержащего блока - border - padding

.container { width: 666px; background: red; padding: 10px 0;  }
.inner { background: rgba(0, 0, 255, 0.5) }

margin + width = width содержащего блока - border - padding

.container { width: 666px; }
.inner { background: rgba(0, 0, 255, 0.5) }

Боль на фильтре грязным бурым пятном - Все, что мне от тебя останется. Урна - мой будущий дом, И вряд ли мне там понравится. Серым пеплом осыпятся вниз Те мечты, что не сбудутся никогда. Меня вряд ли раскурят на бис, Шанс если и есть, то один из ста. Тебе травиться никотином моим, Тебе кашлять моими смолами. Выдыхай скорей мой последний дым И закрывай окно, а то холодно.

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { margin-left: 500px; }

Выдыхай скорей

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { margin-left: 500px; margin-right: 66px; }

Мою душу наружу, ей тесно,

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 300px; }

В твоих легких так мало места...

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 300px; margin-right: 0; }

Выдыхай скорей

если margin-left не задан, значит он равен 0, если margin-left задан в auto, то он вычисляется

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 300px; margin-left: auto }

Но, если честно,

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 300px; margin: 0 auto }

Во всем виноват я сам

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { margin-right: -100px; }

Миллионы праворульных жигулей,

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { margin-right: -100px; margin-left: -100px; }

Заполнят пространство японских хайвеев

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 50%; margin-left: -100px; }

Россия впереди планеты всей,

margin + width = width содержащего блока - border - padding

.wrapper { width: 666px; }
.inner { width: 50%; margin-left: auto; margin-right: -100px; }

No future это не наша идея.

Схлопывание границ

.first { margin-bottom: 30px; }
.second { margin-top: 60px; }

Блоки

Нам скоро стопудово повезет

Свежий ветер разгонит все черные тучи.

Ожидание

Нам скоро стопудово повезет

Свежий ветер разгонит все черные тучи.

Реальность

Нам скоро стопудово повезет

Свежий ветер разгонит все черные тучи.

.inner { margin-top: 30px; }

Блоки

Когда закончится место на всех компьютерах мира

Ожидание

Когда закончится место на всех компьютерах мира

Реальность

Когда закончится место на всех компьютерах мира

Высчитывание результирующего margin'а

Если у двух блочных элементов, принадлежащих одному контексту форматирования, пересекаются margin'ы, то

Берутся максимальный и минимальный среди всех margin'ов
Если максимальный < 0, то максимум — 0. То же самое с минимумом
Результирующий margin = max + min

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

.first { margin-bottom: 60px; }
.second { margin-top: 100px; }

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,.

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,.

.first { margin-bottom: 60px; }
.second { margin-top: -60px; }

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,

.first { margin-bottom: 60px; }
.second { margin-top: -80px; }

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,

Когда моторы сожгут всю нефть

И от нулей олигархов останутся только дыры,

Таблицы

На Марсе классно - красные пески, крутые горы и кратеры

Безумно	красивые
каналы рядом с экватором

Боксы инлайн уровеня

Элемент рендерится как строка
Элементы строчного уровня выстраиваются слева направо сверху вниз
Элемент инлайн уровня участвует в инлайн контексте форматирования
Элемент инлайн уровня генерирует бокс(ы) инлайн уровня
Участвующий в инлайн контексте форматирования элемент может создать вокруг себя анонимный инлайн бокс


Some inline
text followed
by a paragraph
followed by
more inline text.

Some inline text followed by a span followed by more inline text.

Математика инлайн элементов

Математика inline элементов

не реагирует на ширину и высоту
не реагирует на вертикальные margin'ы
padding'и не затрагивают высоту строки

.wrapper { width: 666px; }

Вверх по эскалатору ползущему вниз, Обогнать пытаясь медленный механизм Задыхаясь, кашляя, споткнулся и скис, Плавно уезжаешь обратно

Боксы инлайн уровня по-умолчанию

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
display: inline, inline-block, inline-table

Математика inline-block элементов

реагирует на ширину и высоту
реагирует на вертикальные margin'ы
padding'и затрагивают высоту строки
создаёт внутри себя новый блочный контекст

.wrapper { width: 666px; }
.inner {  }

Мимо проплывают лица хмурых людей, Мило улыбается с плаката модель, Миру наплевать на твою странную цель, Людям ничего не понятно.

ДЗ

https://github.com/urfu-2015/verstka-tasks-5

Deadline
5 ноября
02:59:59.999