Assignments Of Class 3: CSS Box Model
Assignment 1: Basic Box Model Layout
Objective: Create a simple box with margin, padding, and border.
Task:
1. Create a <div> element with a class of "box".
2. Apply a margin of 20px, padding of 15px, a border of 2px solid black, and a width of 300px.
3. Set the height of the box to 150px and center the text inside the box.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">This is a box!</div>
</body>
</html>
CSS:
css
Copy code
.box {
width: 300px;
height: 150px;
margin: 20px;
padding: 15px;
border: 2px solid black;
text-align: center;
line-height: 150px; /* To center text vertically */
}
Explanation:
- Margin: Creates space outside the box (20px).
- Padding: Adds space inside the box around the content (15px).
- Border: Defines a 2px solid border around the content.
- Width and Height: Sets the size of the box.
- Text Alignment: Centers the text both horizontally and vertically.
Assignment 2: Experiment with Padding and Border
Objective: Create a box with varying padding and borders.
Task:
1. Create a <div> element with a class of "box2".
2. Apply padding of 30px on the top and 10px on the sides.
3. Add a dashed border of 3px around the box.
4. Add a margin of 50px and set the box's width to 250px.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 2</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box2">Padding and Border Experiment</div>
</body>
</html>
CSS:
css
Copy code
.box2 {
width: 250px;
margin: 50px;
padding: 30px 10px;
border: 3px dashed red;
text-align: center;
}
Explanation:
- Padding: Different padding values for top (30px) and sides (10px).
- Border: A dashed red border of 3px.
- Margin: 50px margin to create space between the box and the surrounding elements.
Assignment 3: Border and Padding Impact on Box Size
Objective: Observe how padding and border affect the total box size.
Task:
1. Create a <div> element with a class of "box3".
2. Apply a width of 250px and height of 100px.
3. Set padding to 20px on all sides.
4. Add a border of 5px solid blue.
5. Observe the final size of the box.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 3</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box3">Check the total size</div>
</body>
</html>
CSS:
css
Copy code
.box3 {
width: 250px;
height: 100px;
padding: 20px;
border: 5px solid blue;
text-align: center;
line-height: 100px;
}
Explanation:
- Width and Height: Box is 250px wide and 100px high.
- Padding: Adds 20px inside the box on all sides, increasing the internal area.
- Border: The 5px blue border is added around the box, increasing the total size.
- Total box size = width + left/right padding + left/right border + margin.
Assignment 4: Margin Collapse Experiment
Objective: Observe margin collapsing when two adjacent elements are separated by margins.
Task:
1. Create two <div> elements with the classes "box4" and "box5".
2. Set a margin of 30px for both boxes.
3. Observe how the margins collapse.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 4</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box4">First Box</div>
<div class="box5">Second Box</div>
</body>
</html>
CSS:
css
Copy code
.box4, .box5 {
width: 200px;
height: 100px;
margin: 30px;
text-align: center;
line-height: 100px;
}
.box4 {
background-color: #3498db;
}
.box5 {
background-color: #e74c3c;
}
Explanation:
- Margin Collapse: When two elements have margins next to each other, the larger margin will apply, and the smaller one is ignored.
- The space between the two boxes will be 30px instead of 60px (30px + 30px).
Assignment 5: Box with Border Box Sizing
Objective: Apply box-sizing: border-box to ensure padding and border are included in the total width and height.
Task:
1. Create a <div> element with a class of "box6".
2. Set width and height to 300px each.
3. Add padding of 20px and a border of 5px.
4. Apply box-sizing: border-box to the box.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 5</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box6">Box with border-box</div>
</body>
</html>
CSS:
css
Copy code
.box6 {
width: 300px;
height: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box; /* Includes padding and border in the width/height */
text-align: center;
line-height: 300px;
}
Explanation:
- box-sizing: border-box ensures that padding and border are included in the width and height, not added to them.
- Without border-box, the total size would be 300px + 20px padding + 5px border.
Assignment 6: Multiple Box Layout
Objective: Create a layout with multiple boxes that demonstrate margin, padding, and border effects.
Task:
1. Create three <div> elements with different classes: "box7", "box8", and "box9".
2. Apply different margin, padding, and border styles to each box.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 6</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box7">Box 7</div>
<div class="box8">Box 8</div>
<div class="box9">Box 9</div>
</body>
</html>
CSS:
css
Copy code
.box7 {
width: 200px;
height: 100px;
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
.box8 {
width: 200px;
height: 100px;
margin: 20px;
padding: 15px;
border: 3px dotted red;
}
.box9 {
width: 200px;
height: 100px;
margin: 30px;
padding: 25px;
border: 5px dashed green;
}
Explanation:
- Each box has different styles of margin, padding, and border to show how each property affects layout.
Assignment 7: Box Model with Float
Objective: Observe the effects of the float property on the box model.
Task:
1. Create two <div> elements with classes "left-box" and "right-box".
2. Apply a float: left style to the first box and float: right to the second box.
3. Observe how the boxes interact when floated.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 7</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="left-box">Left Box</div>
<div class="right-box">Right Box</div>
</body>
</html>
CSS:
css
Copy code
.left-box {
width: 45%;
height: 100px;
margin: 5px;
padding: 10px;
border: 2px solid blue;
float: left;
}
.right-box {
width: 45%;
height: 100px;
margin: 5px;
padding: 10px;
border: 2px solid green;
float: right;
}
Explanation:
- Float causes the boxes to be aligned next to each other. The first box floats left and the second box floats right.
- Floating elements are taken out of the normal document flow, which affects the positioning of other content.
Assignment 8: Clearfix Method
Objective: Fix layout issues caused by floated elements using the clearfix method.
Task:
1. Create a container <div> with two floated boxes inside it.
2. Apply the clearfix method to the container to clear the floats.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 8</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clearfix">
<div class="box1">Left Box</div>
<div class="box2">Right Box</div>
</div>
</body>
</html>
CSS:
css
Copy code
.clearfix:after {
content: "";
display: table;
clear: both;
}
.box1, .box2 {
width: 45%;
height: 100px;
margin: 10px;
padding: 10px;
border: 2px solid blue;
float: left;
}
Explanation:
- The clearfix method forces the parent container to "clear" the floated elements inside it, ensuring that the layout does not break.
Assignment 9: Border Radius on Box Model
Objective: Apply rounded corners to a box using the border-radius property.
Task:
1. Create a box and apply a border-radius of 15px to round the corners.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 9</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rounded-box">Rounded Box</div>
</body>
</html>
CSS:
css
Copy code
.rounded-box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
border-radius: 15px;
text-align: center;
line-height: 150px;
}
Explanation:
- border-radius rounds the corners of the box, creating a smooth, circular edge.
Assignment 10: Flexible Box Model
Objective: Create a flexible layout using the CSS Flexbox model.
Task:
1. Create a flex container with three items inside it.
2. Apply flex properties to the container and items.
Solution:
HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Assignment 10</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
CSS:
css
Copy code
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: lightblue;
text-align: center;
}
Explanation:
- Flexbox is used to distribute the space between the items and align them properly. The justify-content property spaces out the items horizontally, and align-items centers them vertically.
No comments:
Post a Comment