box model
1. What is the box model?
Speaking of the box model, as front-end developers, I believe everyone has understood it.
It is the cornerstone of web page layout. The tags (elements) in html are all a rectangular plane box. In three dimensions, it is composed of multiple planes, which is called the box model. Among them, there are several elements including element content (content), inner margin (padding), border (border), and outer margin (margin). ,As shown below:
2. The specific css properties of the box model
Padding: the property of padding (also called padding)
Margin: property of margin
Border: the property of border
3. Example (requirement 1)
Create spacing around the text and the box, and add padding to the box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
p{
width:240px;
height:100px;
background:red;
padding-top:50px; /* 内容与盒子上边的距离*/
padding-bottom: 50px; /* 内容与盒子下边的距离*/
padding-left: 30px; /* 内容与盒子左边的距离*/
padding-right: 30px; /* 内容与盒子右边的距离*/
margin: 20px auto;
}
</style>
</head>
<body>
<p>内容</p>
</body>
</html>The result of the operation is as follows:
Fourth, the usage of padding
1. padding is the distance between the content and the box
2. padding is the length inside the box
3. padding mainly controls the positional relationship of child elements inside the box
4. padding is added on the parent element
5. padding can put the box Stretch! ! ! !
If you want to keep the box at its original size, you need to subtract the padding from the width and height! ! !
Note: If a box does not have a fixed size (expanded by the content), adding padding does not need to subtract
6. Set the padding value in a single direction:
padding-left:
padding-right:
padding-top:
padding-bottom:
7. How to set padding :
padding: one value with padding all around
padding: two values with padding at top, bottom,
left and right padding: three values with padding at top, left,
right and bottom padding: four values with padding at top, right, bottom and left
8. Padding will not affect the position of the background image
9. padding cannot be negative
5. Example (requirement 2)
Let there be a certain distance between two boxes (boxes of the same level), and a space around the boxes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box01{
width:400px;
height:300px;
background:orange;
margin-top:20px; /* 距离上边20px的距离*/
margin-bottom:20px; /* 距离上边20px的距离*/
margin-left:20px; /* 距离上边20px的距离*/
margin-right:20px; /* 距离上边20px的距离*/
}
.box02{
width:400px;
height:300px;
background:orange;
margin-top:20px; /* 距离上边20px的距离*/
margin-bottom:20px; /* 距离上边20px的距离*/
margin-left:20px; /* 距离上边20px的距离*/
margin-right:20px; /* 距离上边20px的距离*/
}
</style>
</head>
<body>
<div class="box01">box01</div>
<div class="box02">box02</div>
</body>
</html>The running result is shown in the figure below:
6. Usage of margin
1. The margin grows on the outside of the box.
2. margin controls the positional relationship between the current element and other elements of the same level.
3. The margin will not change the size inside the box.
4. Set the margin value for a single direction of the element
margin-right:
margin-left:
margin-top:
margin-bottom:
5. Margin setting method:
margin: one value around
margin: two values up and down left and right
margin: three values Up, left, down,
margin: four values, up, right, down, left
6. Margin can be set to a negative value!
7. Bugs that often appear in margin:
A. The value of the margin between the upper and lower elements of the same level will not be superimposed, but will overlap. According to the largest setting
B, when the parent element and the first child element are not floating, give the first Adding margin-top to a child element will mistakenly add margin-top to the parent element.