1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
定义一下padding-left的值就可以了，例如下面这样：文字文字文字~~
文字文字文字~~
文字文字文字~~
不过这样的副作用是div里面的其他元素也会向右偏移。所以也可以把padding定义在段落里面，例如
文字文字文字~~
这是直接把css写在html里面的作法，把它写在css文件里面也可以的，我想你应该知道怎么做的，就不详细说明了~~
外部盒子先使用display:flexjustify-content: centeralign-items: center将文字所在的内容盒子水平垂直居中于外部盒子中间，再将内容盒子display:flexalign-items: baseline将内容盒子里面的文字基于第一个文字的底部对齐。html部分
<div class="box">
<div class="content">
<div class="num">8</div>
<div class="unit">折</div>
</div>
</div>
登录后复制
css部分
.box{
background-color: #4773DC
padding: 0
display: flex
justify-content: center
align-items: center
.content{
display: flex
align-items: baseline
.num{
font-size: 50rpx
}
.unit{
font-size: 20rpx
}
}
}
登录后复制
css
