CSS provides several properties to control the layout of elements on a webpage. Here are the main layout properties and their uses:
1. Display
The display property specifies the display behavior (the type of rendering box) of an element.
- block: The element will be displayed as a block-level element, meaning it will start on a new line and take up the full width available.
- inline: The element will be displayed as an inline element, meaning it will not start on a new line and only take up as much width as necessary.
- inline-block: The element will be displayed as an inline-level block container. It allows setting a width and height, but it does not start on a new line.
- grid: The element will be displayed as a grid container, enabling the use of CSS Grid Layout for its children.
- flex: The element will be displayed as a flex container, enabling the use of Flexbox layout for its children.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display</title>
<style>
.display-none {
display: none;
}
.display-block {
display: block;
background-color: lightblue;
padding: 10px;
margin: 5px 0;
}
.display-inline {
display: inline;
background-color: lightcoral;
padding: 10px;
}
.display-inline-block {
display: inline-block;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="display-none">This is not displayed.</div>
<div class="display-block">This is a block element.</div>
<span class="display-inline">This is an inline element.</span>
<span class="display-inline">This is another inline element.</span>
<div class="display-inline-block">This is an inline-block element.</div>
<div class="display-inline-block">This is another inline-block element.</div>
</body>
</html>
2. Block
Block-level elements are those that start on a new line and take up the full width available by default. You can control their dimensions with width and height properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Block</title>
<style>
.block-element {
display: block;
width: 100%;
background-color: lightblue;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="block-element">This is a block-level element.</div>
<div class="block-element">This is another block-level element.</div>
</body>
</html>
3. Inline
Inline elements are those that do not start on a new line and only take up as much width as necessary. You cannot set width and height properties on inline elements; they are controlled by the content inside them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inline</title>
<style>
.inline-element {
display: inline;
background-color: lightcoral;
padding: 5px;
}
</style>
</head>
<body>
<span class="inline-element">This is an inline element.</span>
<span class="inline-element">This is another inline element.</span>
</body>
</html>
4. Inline-Block
Inline-block elements are similar to inline elements in that they do not start on a new line, but they behave like block elements in that you can set width and height properties on them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Inline-Block</title>
<style>
.inline-block-element {
display: inline-block;
background-color: lightgreen;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="inline-block-element">This is an inline-block element.</div>
<div class="inline-block-element">This is another inline-block element.</div>
</body>
</html>
5. Grid
CSS Grid Layout is a two-dimensional layout system for the web. It allows you to layout items in rows and columns.
- grid-template-columns: Defines the columns of the grid.
- grid-template-rows: Defines the rows of the grid.
- grid-column: Specifies the start and end positions of a grid item.
- grid-row: Specifies the start and end positions of a grid item.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
6. Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
flex-direction: Defines the direction of the flex items (row, row-reverse, column, column-reverse).
justify-content: Aligns the flex items along the main axis (flex-start, flex-end, center, space-between, space-around).
align-items: Aligns the flex items along the cross axis (flex-start, flex-end, center, baseline, stretch).
flex-wrap: Defines whether the flex items should wrap or not (nowrap, wrap, wrap-reverse).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: lightgray;
padding: 10px;
}
.flex-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
No comments:
Post a Comment