mdn/css/3_css_layout/00_intro_to_css_layout

00_intro_to_css_layout

dz / mdn / css / 3_css_layout / 00_intro_to_css_layout

Summary

Introduction to CSS layout

Node Tree

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