12_sizing_items

dz / mdn / css / 1_css_building_blocks / 12_sizing_items

Summary

Sizing Items in CSS

Node Tree

• size
  • min_max_sizes
    • min_height
    • max_width
      • max_width_use_case
        • makes_images_response
  • percentages
    • resolved_against_block
    • margin_padding_percentage
  • viewport_units
    • visible_area_of_page
    • vw_vh
      • vw_vh_scale
  • extrinsic_size
  • intrinsic_size
    • extrinsic_size

Nodes

size
content	size
children	min_max_sizes, percentages, viewport_units, extrinsic_size, intrinsic_size

extrinsic_size
content	extrinsic size: size given to an element
parents	intrinsic_size, size

intrinsic_size
content	intrinsic size: size determined by the image itself
children	extrinsic_size (related)
parents	size

percentages
content	percentages
children	resolved_against_block, margin_padding_percentage
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	min_height, max_width
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