项目考察点：弹性布局、伪类、base64
1、弹性布局
弹性布局中心思想就是将父容器设为display: flex，它的所有子元素自动成为容器成员。
在本项目中，可以分为两个大盒子：.row-center和.wrap，其中.wrap内又有两个盒子.row-1和.row-2，如图所示：
界面布局划分
.row-center内项目是居中的，使用 justify-content:center。
.wrap内项目需要两端对齐，使用justify-content:space-between。
.row-1内项目从左往右排列，使用justify-content:flex-start。
.row-2内项目从又往左排列，使用justify-content:flex-end。
WXSS如下：
.row{ display: flex;
}.row-center{ justify-content:center;
}.wrap{ display: flex; justify-content:space-between;
}.wrap .row-1{ justify-content:flex-start;
}.wrap .row-2{ justify-content:flex-end;
}观察row-1结构：
<view class='row row-1'> <view class='item'> <image class='img-style' src='../../images/3.jpg'></image> <text class='item-name'>姑父</text> </view> <view class='item'> <image class='img-style' src='../../images/4.jpg'></image> <text class='item-name'>姑姑</text> </view> <view class='item'> <image class='img-style' src='../../images/8.jpg'></image> <text class='item-name'>表弟</text> </view></view>
我们发现.row-1内的项目 item 之间是兄弟关系，而第三个 item 却在下一行，这时就要给盒子.row-1设置flex-wrap: wrap让 item 在一行排不下的时候自动换行。.row-2同理。
.row{ display: flex; flex-wrap: wrap;
}2、伪类
观察标题.title结构：
<view class='title'>我们这一家</view>
标题只有一行代码，那么就需要用到伪类::before和::after实现[图片]和[图片]这两部分。content 属性与 ::before 及 ::after 伪元素配合使用，来插入生成内容。因为本项目只需要插入背景图片，因此content设置为空。
.title::before{ content: ''; display: block; position:absolute; left:-36rpx; top:8rpx; width:36rpx; height:32rpx; background-size: cover; background-image: url(`http://xxxxxxxx`);
}.title::right{ content: ''; display: block; position:absolute; right:-36rpx; top:8rpx; width:36rpx; height:32rpx; background-size: cover; background-image: url(`http://xxxxxxxx`);
}当只需要给相同元素中第一个元素设置样式的时候，可以使用伪类:first-of-type。因此照片间距我们只需要给每个.row中第一个子元素 item 设置 margin-right 。
.item:first-of-type{ margin-right:14rpx;
}3、base64
由于 WXSS 中不支持引入本地图片，因此在 WXSS 使用 background-image 引入图片时，只能使用网络图片或将本地图片转为 base64 。
两种方式优缺点：
引用网络图片代码相对简单，但缺点是需要将图片上传服务器。
将本地图片转为 base64 的好处是减少 HTTP 请求，但由于 base64 编码会导致图片体积变大，因此适合小尺寸的图片。
网络上有许多 base64 图片在线转换工具，比如 http://imgbase64.duoshitong.com/。
作者：立正小歪牙
链接：https://www.jianshu.com/p/4499b7453602
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
随时随地看视频
