box model, display and position (html5 тема 07 - box model, display position)
TRANSCRIPT
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:
noneblock
inline-blockinlinetable
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
родительскому блоку)
2. 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 class="block__element"></div></div>
15
Margin collapse отсутствует у inline-blockbody { 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
Нормальный поток (normal flow)
- то, как в браузере отображаются элементы относительно друг друга.
По умолчанию, родительский элемент принимает высоту своих дочерних элементов
17
Элемент выбивается из потока, если:
К нему применяется:
1.float2. отрицательный 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; background: #f1652a;} 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 - по дефолтуrelativeabsolute
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