項(xiàng)目考察點(diǎn)：彈性布局载城、偽類最铁、base64
1讯赏、彈性布局
彈性布局中心思想就是將父容器設(shè)為display: flex，它的所有子元素自動(dòng)成為容器成員冷尉。
在本項(xiàng)目中漱挎，可以分為兩個(gè)大盒子：.row-center和.wrap，其中.wrap內(nèi)又有兩個(gè)盒子.row-1和.row-2雀哨，如圖所示：
- .row-center內(nèi)項(xiàng)目是居中的磕谅，使用 justify-content:center。
- .wrap內(nèi)項(xiàng)目需要兩端對(duì)齊雾棺，使用justify-content:space-between怜庸。
- .row-1內(nèi)項(xiàng)目從左往右排列，使用justify-content:flex-start垢村。
- .row-2內(nèi)項(xiàng)目從又往左排列，使用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結(jié)構(gòu)：
<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>
我們發(fā)現(xiàn).row-1內(nèi)的項(xiàng)目 item 之間是兄弟關(guān)系嘉栓，而第三個(gè) item 卻在下一行，這時(shí)就要給盒子.row-1設(shè)置flex-wrap: wrap讓 item 在一行排不下的時(shí)候自動(dòng)換行拓诸。.row-2同理侵佃。
.row{
display: flex;
flex-wrap: wrap;
}
2、偽類
觀察標(biāo)題.title結(jié)構(gòu)：
<view class='title'>我們這一家</view>
標(biāo)題只有一行代碼奠支，那么就需要用到偽類::before和::after實(shí)現(xiàn)[圖片]和[圖片]這兩部分馋辈。content 屬性與 ::before 及 ::after 偽元素配合使用，來插入生成內(nèi)容倍谜。因?yàn)楸卷?xiàng)目只需要插入背景圖片迈螟，因此content設(shè)置為空。
.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`);
}
當(dāng)只需要給相同元素中第一個(gè)元素設(shè)置樣式的時(shí)候尔崔，可以使用偽類:first-of-type答毫。因此照片間距我們只需要給每個(gè).row中第一個(gè)子元素 item 設(shè)置 margin-right 。
.item:first-of-type{
margin-right:14rpx;
}
3季春、base64
由于 WXSS 中不支持引入本地圖片洗搂，因此在 WXSS 使用 background-image 引入圖片時(shí)，只能使用網(wǎng)絡(luò)圖片或?qū)⒈镜貓D片轉(zhuǎn)為 base64 。
兩種方式優(yōu)缺點(diǎn)：
- 引用網(wǎng)絡(luò)圖片代碼相對(duì)簡單耘拇，但缺點(diǎn)是需要將圖片上傳服務(wù)器撵颊。
- 將本地圖片轉(zhuǎn)為 base64 的好處是減少 HTTP 請(qǐng)求，但由于 base64 編碼會(huì)導(dǎo)致圖片體積變大惫叛，因此適合小尺寸的圖片倡勇。
- 網(wǎng)絡(luò)上有許多 base64 圖片在線轉(zhuǎn)換工具，比如 http://imgbase64.duoshitong.com/挣棕。
