Box model, display and position (HTML5 тема 07 - box model, display position)
Transcript of Box model, display and position (HTML5 тема 07 - box model, display position)
![Page 1: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/1.jpg)
Box model, display & positionСтажировка HTML5
Света Шарипова
![Page 2: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/2.jpg)
Box-model
ШИРИНА
Высота
2
![Page 3: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/3.jpg)
Задание
На codepen создайте блок с общей шириной и общей высотой по 100px,любым заметным фоном, паддингом 10px и бордером 2px
Посмотрите box-model этого блока в инспекторе
3
![Page 4: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/4.jpg)
Должно получиться:
.block { width: 76px; height: 76px; padding: 10px; border: 2px solid; background: grey;}
<div class="block"></div>
4
![Page 5: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/5.jpg)
Box-sizing
content-box
border-box
5
![Page 6: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/6.jpg)
Вложенные элементы занимают 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
![Page 7: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/7.jpg)
Задание
Влияет ли border-box на вложенный элемент?
а) Если использовать border-box, то вложенный элемент займет всю ширину родителя, в том числе padding
b) Если использовать border-box, то вложенный элемент займет всю ширину родителя, но не padding
Проверьте на codepen
7
![Page 8: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/8.jpg)
Задание
Влияет ли border-box на вложенный элемент?
а) Если использовать border-box, то вложенный элемент займет всю ширину родителя, в том числе padding
b) Если использовать border-box, то вложенный элемент займет всю ширину родителя, но не padding
8
![Page 9: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/9.jpg)
В чем разница между инлайн и блочными тегами?
1. Расположение2. Ширина3. Пробелы4. Margin
9
![Page 10: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/10.jpg)
Часто используемые значения display:
noneblock
inline-blockinlinetable
table-cell...
10
![Page 11: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/11.jpg)
Display: inline-block;
1. Расположение (как у inline элемента)2. Ширина (по дефолту как у inline, но
может быть задана любая другая, как у block)
3. Пробелы (как у inline)4. Margin (как у block)
11
![Page 12: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/12.jpg)
Display: inline-block - несколько элементов с разной высотой и разным количеством контента
12
Вертикальное выравнивание по дефолту - baseline
![Page 13: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/13.jpg)
Vertical-align фикс для inline-block:
vertical-align: bottom;
13
vertical-align: top;
vertical-align: middle;
![Page 14: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/14.jpg)
Margin collapse блочных элементов
1. Margin collapse внутри родительского блока(лечится добавлением padding’а, clearfix, overflow: auto
родительскому блоку)
2. Margin collapse нескольких блочных элементов, расположенных подряд
14
![Page 15: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/15.jpg)
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
![Page 16: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/16.jpg)
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
![Page 17: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/17.jpg)
Нормальный поток (normal flow)
- то, как в браузере отображаются элементы относительно друг друга.
По умолчанию, родительский элемент принимает высоту своих дочерних элементов
17
![Page 18: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/18.jpg)
Элемент выбивается из потока, если:
К нему применяется:
1.float2. отрицательный margin (в
случае когда возможен margin collapse)
3.position: absolute; или position: fixed;
4.display: none;
18
![Page 19: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/19.jpg)
Выбившийся из потока элемент не влияет на высоту родителя
.block { background: gray; width: 200px; padding: 30px;}.block__element { width: 200px; height: 100px; background: #f1652a;} 19
.block__element { float: left;}
В потоке:
![Page 20: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/20.jpg)
Clearfix
Для случая с float проблему c высотой родителя можно решить, добавив ему clearfix
20
.block::after { content: ' '; display: table; clear: both;}
![Page 21: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/21.jpg)
Скрываем элемент: display vs. visibility
21
.block__element { display: none;}.block__element { visibility: hidden;}
![Page 22: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/22.jpg)
position
static - по дефолтуrelativeabsolute
fixed
22
![Page 23: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/23.jpg)
position: relative
Элемент не выбивается из потока, но смещается относительно своего нормального положения:
23
.block__element { position: relative; left: 100px;}
![Page 24: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/24.jpg)
position: absolute
Элемент выбивается из потока. Новое положение рассчитывается относительно окна браузера
или родительского элемента с position: relative;
24
.block__element { position: absolute; left: 100px; top: 0;}
.block { position: relative;}
.block { position: static;}
![Page 25: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/25.jpg)
position: fixed
Элемент выбивается из потока. Новое положение рассчитывается относительно окна браузера.
Блок остается на месте при скролле.
25
.block__element { position: fixed; left: 100px; top: 0;}
![Page 26: Box model, display and position (HTML5 тема 07 - box model, display position)](https://reader036.fdocuments.net/reader036/viewer/2022062412/5881d3c81a28ab331a8b5dbb/html5/thumbnails/26.jpg)
Полезные ссылки:
Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/
26