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 | form_elements, replaced_elements, reset |
replaced_elements | |
content | Replaced Elements |
children | images_and_videos (examples), layout, object_fit, aspect_ratio |
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 | aspect_ratio, object_fit |
contain | |
content | contain: image scaled down small enough to fit inside box. |
parents | cover, object_fit |
diff_default_behaviors | |
content | different default behaviors in layout: images do not stretch |
parents | layout |
form_elements | |
content | Form Elements |
children | fieldset, font_styles_sometimes_uninherited, input, legend, text_input_easily_styled, textarea, box_sizing |
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 | elements, textarea_overflow_auto, zero_margins_padding |
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 |