Scribd
Upload
5 views

7 - Layout and Positioning in CSS

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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