Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

CSS Positioning and Layout

Uploaded by

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

CSS Positioning and Layout

Uploaded by

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

CSS

Positioning and Layout


Prepared by Mella Academy
Box Model and Layout
Understanding the CSS box model
The CSS box model is a fundamental concept in web design that describes the
layout and rendering of elements on a webpage. It consists of four main
components:
● Content Area: The innermost part of the box, where the actual content of the
element is displayed.
● Padding: The space between the content area and the border.
● Border: A border surrounding the padding and content areas.
● Margin: The outermost layer, providing space between the element and its
surroundings.
Example
Width: 300px
Height: 200px
Padding: 20px
Border: 2px solid #333
Margin: 20px
Display Property
The display property in CSS defines how an element should be displayed.
It specifies the rendering behavior of an element, affecting its layout and how it
interacts with other elements.
1. Display: Block
Elements with display: block; are rendered as block-level elements.
They start on a new line and take up the full width available to them by default.
Examples of block-level elements include <div>, <p>, <h1>-<h6>, <ul>, <li>, etc.
2. Display: Inline
Elements with display: inline; are rendered as inline-level elements.
They flow within the content of a line and do not start on a new line.
They only take up as much width as necessary to contain their content.
Examples of inline-level elements include <span>, <a>, <strong>, <em>, <img>,
etc.
Display: Inline-Block
Elements with display: inline-block; are rendered as inline-level elements but
behave like block-level elements in terms of layout.
They flow within the content of a line but can have their width, height, padding,
and margins set like block-level elements.
They retain the inline behavior of staying on the same line as adjacent content.
Useful for creating elements that need to have block-like layout features while still
flowing within text.
Example use cases include buttons, navigation links, or small containers within
text.
CSS Positioning
CSS positioning is a fundamental concept that determines how elements are
positioned and arranged within the layout of a webpage.
It allows developers to precisely control the placement of elements relative to their
containing elements or the viewport.
Static Positioning
Default positioning for all elements.
Elements are positioned according to the normal flow of the document.

usage:
position: static;
Relative Positioning

Positions an element relative to its normal position in the document flow.


Can be moved using offsets (top, right, bottom, left) without affecting the positions
of surrounding elements.

usage:
position: relative;
Absolute Positioning
Removes the element from the normal document flow and positions it relative to
its nearest positioned ancestor.
If no positioned ancestor is found, the element is positioned relative to the initial
containing block (usually the viewport).

Usage:
position: absolute;
Fixed Positioning
Positions an element relative to the viewport, regardless of its containing element.
The element remains fixed in its position even when the page is scrolled.

Usage:
position: fixed;
Sticky Positioning
Acts like a hybrid of relative and fixed positioning.
The element is treated as relatively positioned until it reaches a specified
threshold, after which it becomes fixed.
Useful for creating elements that stick to the top or bottom of the viewport as the
user scrolls.
Usage:
position: sticky;
Example on Positioning
.container {

position: relative;

.absolute {

position: absolute;

top: 20px;

left: 20px;

}
Example on Positioning
.fixed {

position: fixed;

top: 20px;

right: 20px;

.sticky {

position: sticky;

top: 20px;

}
Flexbox Layout
Flexbox, short for Flexible Box, is a layout model in CSS designed to provide a
more efficient way to layout, align, and distribute space among items in a
container, even when their size is unknown or dynamic.
Key Concepts:
1. Flex Container:
● An element whose display property is set to flex or inline-flex.
● Acts as a parent container for flex items.

1. Flex Items:
● Children of a flex container.
● Automatically laid out within the flex container according to the flexbox layout
rules.
Key Concepts:
3. Main Axis and Cross Axis:
● Flexbox layout operates along two axes: the main axis and the cross axis.
● The main axis is determined by the flex-direction property and is the primary
axis along which flex items are laid out.
● The cross axis is perpendicular to the main axis.

4. Main Start/End and Cross Start/End:


● The main start and end refer to the beginning and end of the main axis.
● The cross start and end refer to the beginning and end of the cross axis.
Flex Container Properties
display: Specifies whether an element is a flex container.

flex-direction: Defines the direction in which flex items are placed in the flex
container (row, row-reverse, column, column-reverse).

justify-content: Aligns flex items along the main axis of the flex container.

align-items: Aligns flex items along the cross axis of the flex container.

align-content: Aligns flex lines within the flex container when there is extra space
in the cross axis.
Flex Item Properties
flex: Specifies the flexibility of a flex item.

flex-grow: Determines how much a flex item should grow relative to the other flex
items.

flex-shrink: Determines how much a flex item should shrink relative to the other
flex items.

flex-basis: Specifies the initial size of a flex item before it stretches or shrinks.

align-self: Overrides the align-items property for a specific flex item.


Example on FlexBox
.container {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

.item {

flex: 1;

You might also like