12_sizing_items
dz / mdn / css / 1_css_building_blocks / 12_sizing_itemsSummary
Sizing Items in CSS
Node Tree
Nodes
| size | |
| content | size |
| children | extrinsic_size, intrinsic_size, min_max_sizes, percentages, viewport_units |
| extrinsic_size | |
| content | extrinsic size: size given to an element |
| parents | size, intrinsic_size |
| intrinsic_size | |
| content | intrinsic size: size determined by the image itself |
| children | extrinsic_size (related) |
| parents | size |
| percentages | |
| content | percentages |
| children | margin_padding_percentage, resolved_against_block |
| parents | size |
| resolved_against_block | |
| content | percentage is resolved against contained block |
| parents | percentages |
| margin_padding_percentage | |
| content | margin and padding set in percentages: value calculated from size of containing block |
| parents | percentages |
| min_max_sizes | |
| content | min- and max- sizes |
| children | max_width, min_height |
| parents | size |
| min_height | |
| content | min-height |
| parents | min_max_sizes |
| max_width | |
| content | max_width |
| children | max_width_use_case |
| parents | min_max_sizes |
| max_width_use_case | |
| content | Common usecase for max-width: cause images to scale down if not enough space for their intrinsic width, also makes sure they don't become larger than max- |
| children | makes_images_response |
| parents | max_width |
| makes_images_response | |
| content | Makes images responsive |
| parents | max_width_use_case |
| viewport_units | |
| content | Viewport Units |
| children | visible_area_of_page (description), vw_vh |
| parents | size |
| visible_area_of_page | |
| content | Visible are of page in the browser you are using to view a site |
| parents | viewport_units |
| vw_vh | |
| content | vw, vh |
| children | vw_vh_scale |
| parents | viewport_units |
| vw_vh_scale | |
| content | 1 vw/vh = 1% of viewport width/height, respectively |
| parents | vw_vh |