- a *replaced element* is an element whose content is an external image or an external document (e.g., , , , ) - *intrinsic dimensions* are width and height defined by the element itself, not imposed by the surroundings - *box model* basically says ... + margin + border + adding + content - *visual formatting model* + *viewport* is visible area for a document - if viewport is smaller than document *canvas*, should get scroll bars + *containing block* is generated by box for its children - position and size of box is relative to its containing block - containing blocks do not necessarily clip + boxes may be *block-level* or *inline* + positioning scheme is either *normal*, *float*, or *absolute* + containing block for an element is content edge of nearest block-level ancestor box (if positioning is 'relative' or 'static') - if positioning is *fixed*, containing block is the viewport - if positioning is *absolute*, containing block is complicated(!) + width ... - specifies box content width - for non-replaced element is width of rendered content - as a percentage means proportion of containing block - if 'auto' and there is enough information to figure out the width (i.e., some combination of intrinsic width, height, aspect ratio) then use that obvious width (e.g., image with an intrinsic width) + if there is not enough information, then 300px OR largest width that generates 2:1 ratio box (if 300px is too wide for device) - there is also 'min-width' and 'max-width' + height ... - like width, except 150px instead of 300px - a percentage will not make sense if containing block does not have explicit height (e.g., )