- Every element has a box around it. Display, margin, border and padding affect the behaviour of the box
- Changing the value of the display property can change whether the outer display type of a box is block or inline. This changes the way it displays alongside other elements in the layout.
- Flex and Grid (
display: flex
anddisplay: grid
) are used to affect the contents - Block and inline
- If an element is given
block
display, then it has a newline before and after it (it starts in a new line). - If an element has
inline
used, then it is present in the same line.inline-flex
causes the elements to be inline and also in flex
- If an element is given
Box Model Image
(1) : Shows block
display
(2) : Shows inline-flex
display
(3) : Shows inline
display
For span and inline elements
top
andbottom
properties (height, margin-top/bottom, etc) do not have any effect.
- margin: distance between the container's border to the objecct's border
- padding: distance between the object's border and the object content
- border: width of the elemen'ts border.
- Flex is one dimensional positioning.
Object
flex-direction
(row/column) determines the direction of the flex.flex-wrap
determines if wrap will be there.flex-grow : <number>
proportion of the size that the element takees space
Item
flex : <number>
determines the proportion of size. (For 4 elements, with number 2 will take2/(1 + 1 + 1 + 2) = 2/5th
of the space.
article {
flex: 1 200px;
}
align-items
: Where the children times are aligned (vertically - start (top) or end (9bottom)) [object]align-self
: Where the chiild is aligned vertically [item]justify-content
: Where the chiildren align horizontally [object]order
: Order of the child [item]
The
justify-items
property is ignored in flexbox layouts.
Positions offered :
div {
position: static; /* default */
position: relative;
position: absolute;
position: fixed;
position: inherit; /* Not very common */
}
Relative : Allows 2 things
-
To nudge elements in different directions with
top
,right
,bottom
andleft
values. (The objects takes it original space but it looks as though moved to another place from there) -
Allow a child element to be positioned absolutely with reference to it.
Absolute
- Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does.
- When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
Fixed
Similar to position absolute, an element that has fixed position is taken out of the document flow. The major difference is: elements with position fixed is always positioned relative to the browser window.
Reference : https://zellwk.com/blog/css-positions/