Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS - Coggle Diagram
CSS
CSS formating contexts
Grid
Block
When a block creates new formatting context.
How to create new block formating context?
use columns property
position it any other than static
change it to inline-block
overflow it with anything except visible
float the element
display: flow-root
What happens?
Stops margins from collapsing
Contains all floated elements
Excludes all externally floated elements
Main things to pay attention to
Each block create new line after and before
If parent and child touch each other on side. Child margin will combine with parent margin.
How to prevent collapse?
Apply padding to child to prevent this.
A display: flow-root to parent element
Vertical margins collapse on block elements. Bigger margin always wins.
Inline
Main things to pay attention to
Inline elements cannot contain block elements.
margin only works on left and right, not top or bottom. padding works in all directions.
Flex
display
flex
Flex axis
Has two axis
cross axis
Cross axis is perpendicular to main axis
Main axis
Main axis is the direction the flex items are actually laid our
Flex direction
column
row
display: flex
Flex container is like a block element to outside elements
display: inline-flex
Flex container is like a inline element to outside elements
Grid
Design
Do we need many wrappers around our elements?
The more organized with our markup we are the easier we can manipulate it. Consider adding wrappers around all logical units (blocks of text, blocks of text and images) etc.