Scribd
Upload
26 views2 pages

CSS Layout Properties Notes

The document outlines important CSS layout properties essential for designing responsive websites, including display, position, flexbox, and grid layout. It explains various properties like width, height, margin, padding, overflow, z-index, and media queries. Emphasizing the use of Flexbox and Grid for modern responsive design, it serves as a guide for effective web layout management.

Uploaded by

suhailpc89495
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views2 pages

CSS Layout Properties Notes

The document outlines important CSS layout properties essential for designing responsive websites, including display, position, flexbox, and grid layout. It explains various properties like width, height, margin, padding, overflow, z-index, and media queries. Emphasizing the use of Flexbox and Grid for modern responsive design, it serves as a guide for effective web layout management.

Uploaded by

suhailpc89495
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS Layout Properties (Important Notes)

Website ka layout design karne ke liye CSS ki kuch important properties hoti hain jo elements ko
position, align aur responsive banane me madad karti hain.

1. Display Property
- block : Pura width leta hai (e.g., <div>, <p>)
- inline : Sirf content jitni jagah leta hai (e.g., <span>, <a>)
- inline-block : Inline aur block dono ka combination
- flex : Flexible layout ke liye
- grid : Grid-based layout ke liye

2. Position Property
- static : Default position
- relative : Normal position se move hota hai
- absolute : Parent element ke respect me position set hoti hai
- fixed : Screen ke ek fix position par rahta hai
- sticky : Scroll hone par ek jagah chipak jata hai

3. Flexbox (Flexible Box Model)


- justify-content : Horizontally align karta hai (center, space-between, space-around)
- align-items : Vertically align karta hai (flex-start, flex-end, center)
- flex-direction : Row ya column layout set karta hai (row, column, row-reverse)

4. Grid Layout
- display: grid; : Grid layout enable karta hai
- grid-template-columns : Column ka size define karta hai
- grid-template-rows : Row ka size define karta hai
- gap : Columns aur rows ke beech gap set karta hai

5. Width, Height, Max-Width, Min-Width


- width : Element ki width set karta hai
- height : Element ki height set karta hai
- max-width : Maximum width restrict karta hai
- min-width : Minimum width define karta hai
6. Margin and Padding
- margin : Element ke bahar ka space
- padding : Element ke andar ka space

7. Box-Sizing Property
- box-sizing: border-box; : Padding aur border ko width aur height me include karne ke liye use
hoti hai

8. Overflow Property
- visible : Content bahar nikal sakta hai
- hidden : Extra content chhup jata hai
- scroll : Scrollbar enable ho jata hai
- auto : Scrollbar tabhi aata hai jab zaroorat ho

9. Z-Index Property
- Elements ki layering define karta hai. Higher z-index wala element upar dikhega.

10. Media Queries (Responsive Design)


- @media (max-width: 768px) { width: 100%; } : Website ko responsive banane ke liye

Yeh CSS layout properties web design me sabse zyada use hoti hain. Agar aapko modern
responsive design banana hai to Flexbox aur Grid ka use karna best rahega.

You might also like