Box model, display and position https://university.noveogroup.ru

1. Box model, display & position
Стажировка HTML5
Света Шарипова

2. Box-model
ШИРИНА
Высота
2

3. Задание
На codepen создайте блок с общей шириной и общей высотой по 100px,
любым заметным фоном, паддингом 10px и бордером 2px
Посмотрите box-model этого блока в инспекторе
3

4. Должно получиться:
.block {
width: 76px;
height: 76px;
padding: 10px;
border: 2px solid;
background: grey;
}
<div class="block"></div>
4

5. Box-sizing
content-box
border-box
5

6. Вложенные элементы занимают 100% ширины,
но padding в эту ширину не входит
.block {
width: 76px;
height: 76px;
padding: 10px;
border: 2px solid;
background: grey;
}
<div class="block">
<div class="block__element">
</div>
</div>
.block__element {
width: 100%;
height: 100%;
background: white;
}
6

7. Задание
Влияет ли border-box на вложенный элемент?
а) Если использовать border-box, то вложенный элемент займет всю ширину
родителя, в том числе padding
b) Если использовать border-box, то вложенный элемент займет всю ширину
родителя, но не padding
Проверьте на codepen
7

8. Задание
Влияет ли border-box на вложенный элемент?
а) Если использовать border-box, то вложенный элемент займет всю ширину
родителя, в том числе padding
b) Если использовать border-box, то вложенный элемент займет всю ширину
родителя, но не padding
8

9. В чем разница между инлайн и блочными тегами?
1. Расположение
2. Ширина
3. Пробелы
4. Margin
9

10. Часто используемые значения display:
none
block
inline-block
inline
table
table-cell
...
10

11. Display: inline-block;
1. Расположение (как у inline элемента)
2. Ширина (по дефолту как у inline, но может
быть задана любая другая, как у block)
3. Пробелы (как у inline)
4. Margin (как у block)
11

12. Display: inline-block - несколько элементов с разной
высотой и разным количеством контента
12
Вертикальное выравнивание по дефолту - baseline

13. Vertical-align фикс для inline-block:
vertical-align: bottom;
13
vertical-align: top;
vertical-align: middle;

14. Margin collapse блочных элементов
1. Margin collapse внутри родительского блока
(лечится добавлением padding’а, clearfix, overflow: auto родительскому
блоку)
1. Margin collapse нескольких блочных элементов, расположенных подряд
14

15. Margin collapse блочных элементов
body {
background: #aaa;
}
.block {
background: #f1652a;
}
.block__element {
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid;
}
<div class="block">
<div class="block__element"></div>
<div class="block__element"></div>
</div>
15

16. Margin collapse отсутствует у inline-block
body {
background: #aaa;
}
.block {
background: #f1652a;
}
.block__element {
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid;
display: inline-block;
}
<div class="block">
<div class="block__element"></div>
<div class="block__element"></div>
</div>
16

17. Нормальный поток (normal flow)
- то, как в браузере отображаются элементы
относительно друг друга.
По умолчанию, родительский элемент принимает высоту
своих дочерних элементов
17

18. Элемент выбивается из потока, если:
К нему применяется:
1. float
2. отрицательный margin (в случае
когда возможен margin collapse)
3. position: absolute; или position: fixed;
4. display: none;
18

19. Выбившийся из потока элемент не влияет на высоту
родителя
.block {
background: gray;
width: 200px;
padding: 30px;
}
.block__element {
width: 200px;
height: 100px;
background: #f1652a;
}
19
.block__element {
float: left;
}
В потоке:

20. Clearfix
Для случая с float проблему c высотой родителя можно решить,
добавив ему clearfix
20
.block::after {
content: ' ';
display: table;
clear: both;
}

21. Скрываем элемент:
display vs. visibility
21
.block__element {
display: none;
}
.block__element {
visibility: hidden;
}

22. position
static - по дефолту
relative
absolute
fixed
22

23. position: relative
Элемент не выбивается из потока,
но смещается относительно своего нормального положения:
23
.block__element {
position: relative;
left: 100px;
}

24. position: absolute
Элемент выбивается из потока.
Новое положение рассчитывается относительно окна браузера
или родительского элемента с position: relative;
24
.block__element {
position: absolute;
left: 100px;
top: 0;
}
.block {
position: relative;
}
.block {
position: static;
}

25. position: fixed
Элемент выбивается из потока.
Новое положение рассчитывается относительно окна браузера.
Блок остается на месте при скролле.
25
.block__element {
position: fixed;
left: 100px;
top: 0;
}

26. Полезные ссылки:
Clearfix:
http://nicolasgallagher.com/micro-clearfix-hack/
26