知识点一：box布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #f5f5f5;
}
div.box{
width:298px;
height:415px;
background-color:white;
margin:100px auto;
}
.box img{
width:100%;
}
p.review{
height:70px;
font-size: 14px;
padding: 0 28px;
margin-top:10px;
}
div.apprise{
font-size: 12px;
color:gray;
margin-top:20px;
padding: 0 28px;
}
div.info{
font-size: 14px;
height:20px;
margin: 0 28px;
padding-top:20px;
}
h4{
display:inline-block;
font-weight: 400;
}
span{
color:orange;
}
</style>
</head>
<body>
<div class ="box">
<img src = "C:\Users\windows 11\Pictures\截屏\Snipaste_2023-03-13_10-24-19.png" alt ="">
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="apprise">来自123784673的评价</div>
<div class="info"><h4>Redmi AirDots真无线蓝...</h4> |<span>99.9元</span></div>
</div>
</body>
</html>
