Модель отображения

Часть 1

Кристина Ильенко

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

Are You Serious?

Как видит человек:

Как видит браузер:

Каждый прямоугольник содержит внутри себя еще несколько прямоугольников

5 важных свойств элемента

width – ширина
height – высота
padding – внутренний отступ
border – граница
margin – внешний отступ

Давайте поймем, что все 5 свойств прямоугольника

width – ширина
height – высота
padding – внутренний отступ
border – граница
margin – внешний отступ

можно разделить на 3 зоны. И найдем аналогии

3 разные зоны:

Зона 1: высота (height) и ширина (width) фактического элемента

Зона 1 – дом

3 разные зоны:

Зона 2: внутренняя область вокруг элемента (padding) и граница (border)

Зона 2 – двор и забор

3 разные зоны:

Зона 3: пустое пространство, отделяющее элемент от соседних (margin)

Зона 3 – деревья между соседними дворами

Боксовая модель CSS

Content-box

Padding-box

Border-box

Margin-box

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

Это алгоритм, который обрабатывает документ и отображает его на экране устройства.

Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, один или несколько боксов, согласно боксовой модели CSS

MDN Web Docs

На положение боксов на странице влияет
размер бокса:

точно задан
вычисляется

На положение боксов на странице влияет
тип бокса:

block (блочный)
inline (строчный)

На положение боксов на странице влияет
схема позиционирования

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

На положение боксов на странице влияет
схема позиционирования

Нормальный поток
Схема float
Схема абсолютного позиционирования

На положение боксов на странице влияют
отношения между элементами DOM:
дочерними и соседними

На положение боксов на странице влияют
размеры и расположение окна просмотра (viewport)

Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.

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

Типы боксов

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

Особенности

Каждый элемент блочного уровня генерирует один главный бокс блочного уровня, который

содержит все дочерние блоки
участвует в позиционировании элемента

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

Особенности

Но некоторые элементы кроме главного бокса генерируют дополнительные, например

            

    I will display as a list item

            
            
.fake-list {
    display: list-item;
    list-style-position: inside;
}

I will display as a list item

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

Блочные элементы по умолчанию:

p	div	pre	ol	ul	dl
h1	h2	h3	h4	h5	h6
address	blockquote	fieldset	form	hr	table

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

Необходимое CSS-свойство

            
Говорят, что элемент является боксом блочного уровня, когда:
display: block; /* а так же list-item, table, flex, ... */

Почему значение flex,
а элемент блочный?

Свойство display

Согласно спецификации CSS Display 3,

свойство display отвечает за:

Внешнее поведение элемента — т.е. в каком контексте форматирования он сам участвует;
Внутреннее поведение элемента— т.е. какой контекст форматирования действует в нем самом

Почему значение flex, а элемент блочный?

Элемент с display: flex
участвует в блочном контексте форматирования, а для своих дочерних элементов он сам создает
гибкий (flex) контекст форматирования,
о котором расскажут в следующих лекциях

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

Занимают всю доступную ширину и выстраиваются сверху вниз

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

Участвуют в блочном контексте форматирования

Блочный контекст форматирования

Это часть визуального CSS-рендеринга веб-страницы

В нем действуют правила, изложенные в блочной модели CSS, которая определяет, как поля, границы и отступы элемента взаимодействуют с другими блоками в том же контексте.

MDN Web Docs

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

Могут создавать вокруг себя анонимные блочные боксы

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

Что это?

В случае смешанного контента алгоритм визуального форматирования добавляет
дополнительную обёртку
для текстового содержимого — анонимный бокс.

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

Пример

            
Какой-то текст
с параграфом внутри
и текстом в конце.

Какой-то текст

с параграфом внутри

и текстом в конце.

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

Особенности

Анонимный блок не связан ни с одним элементом
Анонимный блок не имеет названия, поэтому к нему нельзя применить CSS-стили для оформления
Анонимные боксы наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.

Содержащий блок

Почему это важно?

На размеры и положение элемента часто влияет его содержащий блок

Определение содержащего блока элемента

полностью зависит от значения свойства position

В этой лекции мы рассматриваем случай,
когда position не задан (используется
его дефолтное значение),
и под содержащим блоком понимаем
родительский блок элемента

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

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

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

                    
div {
    width: 20%;
    height: 10%;
}

                    
div {
    width: 5em;
    height: 5em;
}

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

                

    
        Yeah, you can be the greatest,

        you can be the best
    

                
                
.wrapper {
    width: 400px;
    height: 100px;
}

Yeah, you can be the greatest,
you can be the best

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

                    

    
        You can be the King Kong bangin'

        on your chest
    

                    
                    
.wrapper {
    width: 400px;
    height: 100px;
}

.inner {
    margin: 0 20px;
}

You can be the King Kong bangin' on your chest

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

                    

    
        You can beat the world, you can win the war

        You can talk to God, go bangin' on his door

        You can throw your hands up, you can beat the clock
    

                    
                    
.wrapper {
    width: 400px;
    height: 100px;
}

.inner {
    margin: 0 20px;
}

You can beat the world, you can win the war
You can talk to God, go bangin' on his door
You can throw your hands up, you can beat the clock

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

                    

    
        You can move a mountain, you can break rocks

        Some will call that practice, some will call that luck

        But either way your going to the history books
    

                    
                    
.wrapper {
    width: 400px;
    height: 100px;
}

.inner {
    height: 100px;
    margin: 0 20px;
}

You can move a mountain, you can break rocks
Some will call that practice, some will call that luck
But either way your going to the history books

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

                

    
        Standing in the Hall of Fame

        And the world's gonna know your name

        'Cause you burn with the brightest flame
    

                
                
.wrapper {
    width: 500px;
    height: 100px;
}

.inner {
    width: 600px;
    height: 100px;
    margin: 0 20px;
}

Standing in the Hall of Fame
And the world's gonna know your name
'Cause you burn with the brightest flame

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

margin и padding

margin: 20px 10px 5px 34px;

margin-top: 20px;

margin-right: 10px;

margin-bottom: 5px;

margin-left: 34px;

Аналогично для padding

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  */;

Аналогично для padding

Процентные значения

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

            
.wrapper {
    width: 816px;
    background: #3af4d5;
}
.inner {
    width: 50%;
}

You can go the distance, you can run a mile
You can walk straight through hell with a smile

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

                
.wrapper {
    width: 470px;
    height: 400px;
}
.inner {
    height: 50%;
    width: 60%;
}

You can be a hero, you can get the gold
Breaking all the records they thought
would never be broke

                
.wrapper {
    width: 457px;
}
.inner {
    height: 50%;
    width: 70%;
}

Yeah, do it for your people,
do it for your pride
How are you ever gonna
know if you never even try?

margin-left/right и padding-left/right, заданные в процентах, считаются относительно ширины содержащего блока
margin-top/bottom и padding-top/bottom, заданные в процентах, считаются относительно ширины содержащего блока

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;
}

Do it for your country, do it for your name

border


div {
    border: 20px dashed blue;
}

'Cause there's gonna be a day, when you're

border


div {
    border: 20px solid blue;
}

Standing in the Hall of Fame

border


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

And the world's gonna know your name

border


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

'Cause you burn with the brightest flame

Перерыв

Пример #1

                
.parent {
    width: 500px;
    height: 500px;
    border:  10px solid #3af4d5;
}

.child {
    width: 100%;
    height: 100px;
    margin: 2em auto;
    background-color: #f70044;
}

Parent

Child

Пример #2

                
.parent {
    width: 500px;
    height: 500px;
    border: 10px solid #3af4d5;
}

.child {
    width: 100%;
    height: 100px;
    margin: 2em auto;
    background-color: #f70044;
    /* добавим границу */
    border: 10px solid #5b6dcd;
    /* и внутренний отступ: */
    padding: 5px;
}

Parent

Child

Что происходит?

По умолчанию в блочной модели CSS выставленная ширина и высота применяются только к content-box элемента

Если элементу дополнительно заданы border или padding, то их значения добавятся к ширине и высоте

Если размер содержащего элемента явно заданы,
а сумма размеров border, padding и размеров элемента превышают их, элемент не поместится в содержащем

MDN Web Docs

Как быть?

Правильно использовать свойство
box-sizing

Какие варианты использования?

content-box (по умолчанию)
border-box

box-sizing: content-box

Ширина и высота, которую устанавливаем элементу, применяется к его content-box

Если задаем элементу дополнительно border или padding с ненулевыми размерами, то эти значения будут добавлены к заданным выше

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

box-sizing: border-box

При рендеринге браузер будет учитывать заданные значения border или padding так, чтобы не выходить за указанные значения высоты и ширины

Пример #3

                
.parent {
    width: 500px;
    height: 500px;
    border: 10px solid #3af4d5;
}

.child {
    width: 100%;
    height: 100px;
    margin: 2em auto;
    background-color: #f70044;
    /* content-box -> border-box */
    box-sizing: border-box;
    border: 10px solid #5b6dcd;
    padding: 5px;
}

Parent

Child

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

Пример


.wrapper {
    width: 666px;
    background: #3af4d5;
    padding: 10px 0;
}


.inner {
    width: 400px;
    margin: 0 auto;
    background: #00bbf0;
}

And you’ll be on the walls of the Hall of Fame

Что сделал браузер?

Браузер самостоятельно посчитал отступы

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

Пусть box-sizing: content-box
margin + border + padding + width = width содержащего блока
margin + width = width содержащего блока - border - padding

При этом border/padding: либо заданы, либо auto, т.е.

Значит значения в правой части формулы известны

Браузеру остается вычислить margin-left, margin-right и ширину блока