Объясни блочную модель
Вопрос
Объясни блочную модель CSS. Как считается итоговый размер элемента?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Четыре слоя: content, padding, border, margin
По умолчанию `content-box`: width задаёт только content
`border-box`: padding и border входят в width, поэтому его ставят глобальным сбросом
Margin в размер коробки не входит, это расстояние до соседей
Вертикальные margin соседних блоков схлопываются
Пример расчёта: 200 + 2 × 20 + 2 × 5 = 250px
Что могут спросить следом
- Когда margin не схлопываются?
- От чего считается процентный padding?
- Как блочная модель работает у строчных элементов?
Разбор
Каждый элемент в CSS это прямоугольник из четырёх слоёв: content, внутренний отступ padding, рамка border и внешний отступ margin. Как трактуется width, решает box-sizing. По умолчанию content-box: width задаёт только content, и если у блока width 200, padding 20 и border 5, на экране он займёт 250px. При border-box padding и border входят в 200px, а content сжимается до 150. Поэтому почти везде ставят сброс *, *::before, *::after { box-sizing: border-box }: размеры становятся предсказуемыми и width: 100% с padding не вылезает. Margin в размер не входит никогда. Вертикальные margin соседних блоков схлопываются до большего, а у flex и grid элементов нет. У строчных элементов width и height не работают, а вертикальные отступы не раздвигают строки.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.