Scribd
Upload
5 views

7 - Layout and Positioning in CSS

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

7 - Layout and Positioning in CSS

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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?

You might also like