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

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