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;
width: 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>