�ݺ�ߣ

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

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

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

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

Box-sizing
content-box
border-box
5

Вложенные элементы занимают 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

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

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

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

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

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

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

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

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

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>
15

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

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

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

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

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

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

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

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

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

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

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

�ݺ�ߣ

Box model, display and position (HTML5 тема 07 - box model, display position)

Recommended

More Related Content

Viewers also liked (19)

Similar to Box model, display and position (HTML5 тема 07 - box model, display position) (20)

More from Noveo (17)

Box model, display and position (HTML5 тема 07 - box model, display position)