Box model, display and position (HTML5 тема 07 - box model, display position)
Download as PPTX, PDF0 likes443 views
Документ является инструкцией по использованию модели коробки (box model) и свойств отображения (display) в HTML5, включая задания для практики. Описываются различные аспекты настройки ширины, высоты, паддингов и бордеров, а также важные различия между блочными и инлайн-тегами. Также рассматриваются проблемы коллапса отступов и различные позиции элементов.
Box model, display and position (HTML5 тема 07 - box model, display position)
- 1. Box model, display & position Стажировка HTML5 Света Шарипова
- 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
- 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; }