Phase 4 — Allowed

This file is the gauge for everything in phase4/. Do not use anything outside this list.

Learning goal

Complete the box model, make declared sizes predictable, and add responsive size constraints to Phase 3 layouts.

Document structure

Content / controls

Everything from Phase 3:

New in Phase 4:

display: block, inline-block, none, flex
box-sizing: content-box, border-box
justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
Sizes may use px, %, or auto where valid.

JavaScript
Any HTML tag not listed above
Any CSS property not listed above
align-items, gap, flex-direction, flex-wrap, overflow, media queries, and inline styles

Read every box from inside out: content → padding → border → margin.
Under content-box, padding and border are added outside width and height.
Under border-box, padding and border are included inside width and height.
Margin always remains outside the declared dimensions.
Prefer width: 100% with max-width for containers that may shrink.
Use min-width cautiously because it can force overflow.
Prefer min-height when content may grow.
Do not put changing text in a restrictive max-height while overflow is unavailable.

On html: lang
On link: rel, href
On a: href
On elements: class, id when used for labelling or fragment links
On landmarks and sections: aria-label, aria-labelledby
On img: src, alt, width, height
On input: type, name, id, placeholder, value, min, checked, readonly
On button: type