:::主要练习盒子模型，margin和padding的运用 ,难点是转换成行内块
产品模块
这是一个很好的图片，很有特色。
来自于 11722 的评价
redmi兰妮娅...
| 99.9元
<style scoped>
*{
margin: 0;
padding: 0;
}
.box{
width: 298px;
height: 415px;
background-color:rgb(255, 255, 255);
margin: 100px auto;
}
.back{
background-color: gray
}
.box img{
/* 和父亲一样宽 */
width: 100%;
height: 200;
}
.review{
height: 70px;
font-size: 14px;
/* 不会撑开盒子的宽度 */
padding: 0px 28px;
margin-top: 30px;
}
.appraise{
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info{
margin-top: 15px;
font-size: 14px;
padding: 0 28px;
}
.info h4{
/* h4本来是一个占一行，转换为行内块 */
display: inline-block;
/* 不加粗 */
font-weight: 400;
}
.info span{
color: #e68b1c;
}
.info em{
/* 也装进一个盒子里面 */
font-style: normal;
/* 上右下左magin' */
margin:0 7px 0 20px;
color: #b0b0b0;
}
</style>
<div class="back">
<div class="box">
<img src="" alt="">
<p class="review">
这是一个很好的图片，很有特色。
</p>
<div class="appraise">
来自于 11722 的评价
</div>
<div class="info">
<h4>redmi兰妮娅...</h4> <em>|</em> <span>99.9元</span></div>
</div>
</div>