Scribd
Upload
19 views7 pages

Wdtmodule-2 Parta

Uploaded by

chandan kumar
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
19 views7 pages

Wdtmodule-2 Parta

Uploaded by

chandan kumar
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
You are on page 1/ 7

Detecting HTML 5 features – Advanced CSS: Layout, Normal Flow,

Positioning
Elements, Floating Element

CSS provides several advanced layout techniques that allow


developers to create complex and responsive designs. Here are
some key aspects of advanced CSS layout:

1. Flexbox:
Flexbox (Flexible Box Layout) is a one-dimensional layout method
for laying out items in rows or columns. It provides a more ef cient
and predictable way to distribute space and align items within a
container.

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

.item {
flex: 1;
}

CSS provides several advanced layout techniques that allow


developers to create complex and responsive designs. Here are
some key aspects of advanced CSS layout:

1. Flexbox:
Flexbox (Flexible Box Layout) is a one-dimensional layout method
for laying out items in rows or columns. It provides a more ef cient
and predictable way to distribute space and align items within a
container.

.container { display: flex; justify-content: space-between; align-items:


center; } .item { flex: 1; }
fi
fi
2. CSS Grid:
CSS Grid Layout is a two-dimensional layout system that allows
you to create complex grid-based layouts with rows and columns. It
is particularly useful for designing responsive web applications.

.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}

.item {
grid-column: span 2;
}

3. Grid Layout with Flexbox for Alignment:


Combining CSS Grid and Flexbox allows you to create powerful
layouts. Use Grid for the overall structure and Flexbox for alignment
and distribution within grid items.

.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

4. Multi-Column Layout:
The multicol property allows you to create multi-column layouts,
where content ows into multiple columns within a container.
fl
.container {
column-count: 3;
column-gap: 20px;
}

5.Normal Flow:
In the normal ow, elements are laid out one after another in the
order they appear in the HTML document. The ow can be either
horizontal (left to right) or vertical (top to bottom), depending on the
elements.

/* Elements will appear in the normal flow */


.normal-flow {
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
}

6. Positioning:
Positioning allows you to control the exact placement of an element
relative to its containing element or the viewport. The position
property is used for this purpose.

Static:
• Default value.
• Elements are positioned according to the normal ow of the
document.
• The top, right, bottom, and left properties have no effect.
Relative:
• The element is positioned relative to its normal position in the
document ow.
• The top, right, bottom, and left properties can be used to
offset the element from its normal position.
Absolute:
• The element is removed from the normal document ow, and
its position is relative to its nearest positioned ancestor.
fl
fl
fl
fl
fl
• If there is no positioned ancestor, it is positioned relative to the
initial containing block (usually the <html> element).
• The top, right, bottom, and left properties are used to position
the element.
Fixed:
• The element is removed from the normal document ow and
positioned relative to the viewport (the browser window).
• It remains xed even when the page is scrolled.
• The top, right, bottom, and left properties are used to
position the element
Sticky:
• The element is treated as relative positioned until it crosses
a speci ed point, then it is treated as fixed positioned.
• The top, right, bottom, and left properties are used to
specify the "sticking" point.
Example:

/* Positioning Example */
.positioned-element {
position: relative;
top: 20px;
left: 30px;
border: 1px solid #ccc;
padding: 10px;
}

7. Floating Elements:
Floating elements allows text and inline elements to wrap around
them. Floated elements are taken out of the normal ow and
positioned to the left or right of their containing element.

Example:

/* Floating Example */
.float-left {
float: left;
width: 150px;
fi
fi
fl
fl
margin: 10px;
}

.float-right {
float: right;
width: 150px;
margin: 10px;
}

8. Canvas

In HTML, the <canvas> element is used to create graphics using


JavaScript. It provides a drawing surface for creating dynamic and
interactive content. Here's a basic example of using the <canvas>
element along with JavaScript to draw a simple rectangle:

<!DOCTYPE html>
<head>
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
// Get the canvas element
var canvas = document.getElementById('myCanvas');

// Get the 2D rendering context


var context = canvas.getContext('2d');

// Draw a rectangle
context.fillStyle = 'lightblue';
context.fillRect(50, 50, 100, 50);

// Draw a circle
context.beginPath();
context.arc(300, 100, 30, 0, 2 * Math.PI, false);
context.fillStyle = 'lightgreen';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
</script>

</body>
</html>
Here is context.arc() signature:
arc(x, y, radius, startAngle, endAngle, anticlockwise)
The x and y values de ne the center of our circle, and the radius
will be the radius of the circle upon which our arc will be drawn.
startAngle and endAngle are in radians, not degrees.
anticlockwise is a true or false value that de nes the direction of
the arc.
In this example:

• The <canvas> element is created with the ID "myCanvas" and


a width and height.
• The <script> section contains JavaScript code that gets the
2D rendering context of the canvas using getContext('2d').
• Two shapes are drawn on the canvas: a lled rectangle and a
lled circle.
• fillStyle property sets the ll color, and strokeStyle sets
the stroke color.

9. Video

<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Example</title>
</head>
<body>

<h2>HTML Video Example</h2>

<video width="640" height="360" controls>


<source src="sample_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
fi
fi
fi
fi
fi
</html>

• The <video> element is used to embed the video.


• The width and height attributes set the dimensions of the
video player.
• The controls attribute adds video controls (play, pause,
volume, etc.).
• The <source> element inside <video> speci es the video le
(example.mp4) and its type (video/mp4). You can include
multiple <source> elements for different video formats to
ensure compatibility with various browsers.
• The text "Your browser does not support the video tag." will be
displayed if the browser doesn't support the <video> tag.
Make sure to replace "example.mp4" with the actual path to your
video le. Additionally, you may need to provide multiple sources for
different video formats to support various browsers.

Here's a breakdown of the <video> attributes:

• src: Speci es the URL of the video le.


• type: Speci es the MIME type of the video le.
• controls: Enables video controls.
• width and height: Set the dimensions of the video player.
fi
fi
fi
fi
fi
fi
fi

You might also like