Модуль 3 · Урок 11
Box model, sizing і overflow
Кожний rendered element створює boxes. Щоб пояснити «чому ширше за container», рахуйте content, padding і border, перевіряйте box-sizing та normal flow, а не маскуйте проблему глобальним overflow hidden.
ContentPadding + borderborder-boxOverflow
Чотири шари box model
| Area | Що містить | Входить у border box |
|---|---|---|
| Content | Text/replaced content | Так |
| Padding | Внутрішній простір навколо content | Так |
| Border | Межа padding box | Так |
| Margin | Зовнішній простір між boxes | Ні |
Для width: 300px; padding: 20px; border: 2px у content-box border box = 344px. У border-box declared width 300px уже включає padding і border.
Block, inline та inline-block
BlockПочинає новий line у normal flow; auto inline size зазвичай заповнює available space.
InlineТече всередині line boxes; width/height і vertical margins не працюють як у block.
Inline-blockЗовні бере участь в inline flow, всередині має block box behavior.
Normal flowBaseline layout до Flexbox/Grid/positioning; його треба розуміти, а не «обнуляти».
Overflow — symptom із причиною
| Причина | Evidence | Resilient fix |
|---|---|---|
width:100% + padding у content-box | Border box ширший parent | border-box або auto width |
| Довгий unbreakable token | Scroll width росте через text | overflow-wrap:anywhere за змістом |
| Fixed width/height | Content не поміщається після resize | min/max/auto sizing |
| Справді двовимірні дані | Table потребує обох axes | Локальний scroll container із label |
overflow:hidden може обрізати потрібний content і focus indicators. Використовуйте його лише коли clipping є усвідомленою частиною design.
Практика
- Обчисліть три cases у
box-model-calculations.csv. - Підтвердьте числа у DevTools Box Model.
- Виправте page-level overflow без приховування body overflow.
- Перевірте long token, 200% text і 320 CSS px.
Офіційні джерела
Практична перевірка · урок 11 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.