1 <!--首先在div中添加四个span标签-->
<div>
<!--span*4+tab-->
<!--span{span$}*4-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
2 设置span标签的背景色，让其显示出来
/*div span表示div子标签中第几个span*/
div span:nth-child(1){
background: saddlebrown;
}
结果如下图所示：
3
一旦设置了绝对位置：absolute，
它跑到其他地方，下一个span就会挤上来，占到它的位置
4 分别设置四个span的位置，注意这里设置的是绝对位置
5 但是这里我的div并没有显示出颜色来，怎么办呢
设置背景
background: pink;
没有居中，需要调一下div的margin，设置为auto
/*整体居中 margin: 0 auto;*/
margin: 200px auto;
position: relative;
完整html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!--然后设置div和span的样式-->
<style>
div{
height:300px;
300px;
background: pink;
border: 20 solid red;
/*整体居中 margin: 0 auto;*/
margin: 200px auto;
position: relative;
}
/*div span表示div子标签中第几个span*/
div span:nth-child(1){
background: saddlebrown;
/*一旦设置了绝对位置：absolute，
它跑到其他地方，下一个span就会挤上来，占到它的位置*/
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
left: 0px;
top: 0px;
}
div span:nth-child(2){
background: plum;
position: absolute;
right: 0px;
top: 0px;
}
div span:nth-child(3){
background:green;
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
left: 0px;
bottom: 0px;
}
div span:nth-child(4){
background: orange;
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
right: 0px;
bottom: 0px;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VS Code编写html之页面布局</title>
</head>
<body>
<!--首先在div中添加四个span标签-->
<div>
<!--span*4+tab-->
<!--span{span$}*4-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
</body>
</html>