00_intro_to_css_layout
dz / mdn / css / 3_css_layout / 00_intro_to_css_layoutSummary
Introduction to CSS layout
Node Tree
- page_layout_techniques
- positioning_techniques
- css_layout
Nodes
css_layout | |
content | CSS Layout |
children | control_elems_position_rel_to |
control_elems_position_rel_to | |
content | Take webpage elements, control where they are positioned relative to... |
children | main_viewport_window, parent_container, surrounding_elems, default_pos_normal_layout_flow |
parents | css_layout |
default_pos_normal_layout_flow | |
content | Default position in normal layout flow |
parents | normal_flow, control_elems_position_rel_to |
surrounding_elems | |
content | Other surrounding elements |
parents | control_elems_position_rel_to |
parent_container | |
content | Parent Container |
parents | control_elems_position_rel_to |
main_viewport_window | |
content | Main viewport / window |
parents | control_elems_position_rel_to |
page_layout_techniques | |
content | Page Layout Techniques |
children | multi_column_layout, normal_flow, positioning, table_layout, display_prop, flexbox, floats, grid |
normal_flow | |
content | Normal Flow |
children | default_html_layout (description), default_pos_normal_layout_flow |
parents | page_layout_techniques |
display_prop | |
content | Display Property |
children | display_block, display_grid, display_inline, dprop_main_method_page_layout |
parents | page_layout_techniques |
flexbox | |
content | flexbox |
children | lay_things_out_1d, align_items, flex_direction, flex_items, flexible_box_layout (AKA) |
parents | page_layout_techniques |
floats | |
content | floats |
children | elem_removed_normal_flow, float_prop_vals |
parents | page_layout_techniques |
grid | |
content | grid |
parents | page_layout_techniques |
positioning | |
content | positioning |
parents | page_layout_techniques |
table_layout | |
content | table layout |
children | table_legacy_only |
parents | page_layout_techniques |
multi_column_layout | |
content | Multi-column layout |
children | text_flows_like_newspaper (description), column_count, column_width |
parents | page_layout_techniques |
default_html_layout | |
content | How browser lays out HTML pages by default |
parents | normal_flow |
dprop_main_method_page_layout | |
content | Specifying main values for the display property is the main method for achieving page layout in CSS |
parents | display_prop |
display_block | |
content | "display:block" displays paragraphs one after the other |
parents | display_prop |
display_inline | |
content | "display:inline" diplays next to eachother like words in sentence. |
parents | display_prop |
flexible_box_layout | |
content | flexible box layout |
parents | flexbox |
lay_things_out_1d | |
content | makes it easy to lay things out in one dimension |
children | grid_layout (2d instead of 1d) |
parents | flexbox |
flex_items | |
content | flex items |
children | props_applied_to_flex_items |
parents | flexbox |
flex_direction | |
content | flex-direction (initial val: row) |
parents | flexbox |
props_applied_to_flex_items | |
content | Properites applied to flex items |
children | flex |
parents | flex_items |
align_items | |
content | align-items (initial value: stretch) |
children | stretch |
parents | flexbox |
stretch | |
content | stretch: items stretch to height of flex container |
parents | align_items |
flex | |
content | flex: causes items to grow and fill the container |
parents | props_applied_to_flex_items |
grid_layout | |
content | grid layout: designed to lay things out in two dimensions: rows and columns. |
children | grid_template_rows_cols, placing_items_grid, display_grid |
parents | lay_things_out_1d |
display_grid | |
content | display: grid |
parents | grid_layout, display_prop |
placing_items_grid | |
content | Placing items on the grid |
children | grid_column_row |
parents | grid_layout |
grid_template_rows_cols | |
content | grid-template-rows/grid-template-columns define row and column tracks for parents |
parents | grid_layout |
grid_column_row | |
content | grid-column / grid-row |
children | start_end |
parents | placing_items_grid |
start_end | |
content | :start/end |
parents | grid_column_row |
elem_removed_normal_flow | |
content | floated element is moved to left or right and removed from normal flow. surrounding cont float around it. |
parents | floats |
positioning_techniques | |
content | positioning techniques |
children | moves_elem_to_another_loc (description), pos_type |
float_prop_vals | |
content | float property values: left, right, none, inherit |
parents | floats |
moves_elem_to_another_loc | |
content | moves elemen from where it would otherwise be placed in normal flow to another location |
parents | positioning_techniques |
pos_type | |
content | position types |
children | relative, static, sticky, absolute, fixed |
parents | positioning_techniques |
static | |
content | static |
parents | pos_type |
relative | |
content | relative |
children | relative_fixed_mix |
parents | pos_type |
absolute | |
content | absolute |
children | offset_item_default_normal_flow_pos, offsets_from_viewport (in absolute positioning, offsets applied from container), pos_offsets_containing_block |
parents | pos_type |
fixed | |
content | fixed |
children | relative_fixed_mix, fixed_positioning |
parents | pos_type |
sticky | |
content | sticky |
children | sticky_positioning |
parents | pos_type |
pos_offsets_containing_block | |
content | Completely removes element from normal flow, positions it using offsets from containing block |
parents | absolute |
offset_item_default_normal_flow_pos | |
content | offsets an item from its default position in normal flow |
parents | absolute |
fixed_positioning | |
content | Fixed Positioning |
children | offsets_from_viewport |
parents | fixed |
offsets_from_viewport | |
content | Offsets applied from viewport |
parents | fixed_positioning, absolute |
sticky_positioning | |
content | Sticky Positioning |
children | relative_fixed_mix (description), sticky_scroll_behavior |
parents | sticky |
relative_fixed_mix | |
content | Mixes relative positioning with fixed positioning |
parents | relative, sticky_positioning, fixed |
sticky_scroll_behavior | |
content | Scrolls in normal flow until it hits defined viewport offsets, then it becomes "stuck" as if it had position:fixed applied |
parents | sticky_positioning |
table_legacy_only | |
content | Legacy, should only be used to support browsers that don't use flex or grid. |
parents | table_layout |
text_flows_like_newspaper | |
content | Layout content in columns similar to how text flows in a newspaper |
parents | multi_column_layout |
column_count | |
content | column-count: how many columns to have |
children | column_width (related) |
parents | multi_column_layout |
column_width | |
content | column-width: fill the container with as many columns columns as possible using width. |
parents | column_count, multi_column_layout |