1 layout and positioning in CSS
Prepared by: Asst.pro Mohammad Edris Naderi
Year: 1402 – autumn
2 layout and positioning in CSS
Display Property:
The `display` property determines the type of box an element generates.
Common values include:
`block`: Generates a block-level element that takes up the full width available and
starts on a new line.
3 layout and positioning in CSS
`inline`: Generates an inline-level element that does not start on a
new line and only occupies the space necessary for its content.
`inline-block`: Generates an inline-level element that behaves like a
block-level element but still flows with surrounding inline elements.
4 layout and positioning in CSS
Position Property:
The `position` property specifies how an element is positioned within its containing
element.
Common values include:
`static`: The default position value, where elements follow the normal flow of the
document.
5 layout and positioning in CSS
`relative`: Positions an element relative to its normal position, allowing adjustment using
top, right, bottom, and left properties.
`absolute`: Positions an element relative to its nearest positioned ancestor or the initial
containing block.
`fixed`: Positions an element relative to the viewport, meaning it stays fixed even when the
page is scrolled.
6 layout and positioning in CSS
Float Property:
- The `float` property specifies whether an element should be floated to the left or
right, allowing other elements to wrap around it.
- Floated elements are taken out of the normal flow of the document.
- Common values include `left` and `right`.
7 layout and positioning in CSS
Clear Property:
The `clear` property specifies which sides of an element should not
be adjacent to any floated elements.
It prevents an element from wrapping around a floated element.
Common values include `left`, `right`, `both`, and `none`.
8 layout and positioning in CSS
Flexbox Layout:
Flexbox is a one-dimensional layout model that provides an efficient way to
distribute space among items in a container.
It consists of a flex container and flex items.
The container's `display` property is set to `flex` or `inline-flex`.
9 layout and positioning in CSS
Flex items are direct children of the flex container.
Flexbox offers properties like `flex-direction`, `justify-content`, `align-
items`, and `align-self` to control the layout and alignment of items.
10 layout and positioning in CSS
CSS Grid Layout:
CSS Grid Layout is a two-dimensional layout system that allows precise
control over the alignment and positioning of elements in a grid.
It consists of a grid container and grid items.
The container's `display` property is set to `grid`.
11 layout and positioning in CSS
Grid items are direct children of the grid container.
Grid layout provides properties like `grid-template-columns`, `grid-
template-rows`, `grid-gap`, and `grid-area` to define the grid structure
and placement of items.
12 layout and positioning in CSS
Understanding and utilizing these layout and
positioning techniques is essential for creating
responsive and well-structured web layouts.
13
Questions?
