13_images_media_form_elements
dz / mdn / css / 1_css_building_blocks / 13_images_media_form_elementsSummary
Images, media, and form elements
Node Tree
Nodes
| elements | |
| content | elements |
| children | replaced_elements, reset, form_elements |
| replaced_elements | |
| content | Replaced Elements |
| children | object_fit, aspect_ratio, images_and_videos (examples), layout |
| parents | elements |
| images_and_videos | |
| content | images and videos |
| parents | replaced_elements |
| aspect_ratio | |
| content | aspect ratio: size in horizontal/vertical dimensions, displayed using intrinsic dimensions by default |
| children | cover |
| parents | replaced_elements |
| object_fit | |
| content | object-fit |
| children | contain, cover |
| parents | replaced_elements |
| layout | |
| content | layout |
| children | diff_default_behaviors |
| parents | replaced_elements |
| cover | |
| content | cover: sizes imag eto fit box while maintaining aspect ratio. May be cropped |
| children | contain (related) |
| parents | object_fit, aspect_ratio |
| contain | |
| content | contain: image scaled down small enough to fit inside box. |
| parents | object_fit, cover |
| diff_default_behaviors | |
| content | different default behaviors in layout: images do not stretch |
| parents | layout |
| form_elements | |
| content | Form Elements |
| children | text_input_easily_styled, textarea, box_sizing, fieldset, font_styles_sometimes_uninherited, input, legend |
| parents | elements |
| input | |
| content | <input> |
| parents | form_elements |
| font_styles_sometimes_uninherited | |
| content | Some browsers don't inherit font styling by default. use font-family:inherit. |
| parents | form_elements |
| textarea | |
| content | <textarea> |
| parents | form_elements |
| fieldset | |
| content | <fieldset> |
| parents | form_elements |
| legend | |
| content | <legend> |
| parents | form_elements |
| text_input_easily_styled | |
| content | Text input element easy to style. Behavior like other boxes on page. |
| parents | form_elements |
| box_sizing | |
| content | box-sizing |
| children | zero_margins_padding, border_box |
| parents | form_elements |
| border_box | |
| content | border-box |
| parents | box_sizing |
| reset | |
| content | reset |
| children | normalizing_stylesheet (AKA) |
| parents | textarea_overflow_auto, zero_margins_padding, elements |
| zero_margins_padding | |
| content | Good idea to set margins/padding to zero, then add them back in when styling |
| children | reset |
| parents | box_sizing |
| textarea_overflow_auto | |
| content | textarea, overflow: auto to stop IE from needlessly showing scrollbar |
| children | reset |
| normalizing_stylesheet | |
| content | Normalizing Stylesheet |
| parents | reset |