微信小程式開發5——頁面樣式檔案

一、關于WXSS

​ WXSS是基于CSS擴充的頁面樣式語言，用于描述WXML的元件樣式，具有CSS的大部分特性，對CSS部分相容如選擇器，擴充了尺寸機關等。

尺寸機關	意義
rpx	WXSS規定螢幕寬度為750rpx
rem	WXSS規定螢幕寬度20rem
px	由不同手機型号決定，渲染時換算

二、盒子模型

​ 盒子模型是布局的基礎，CSS假定每一個元素都會生成一個或多個矩形框，每個元素框中心都有一個内容區content，内容區到邊框距離padding，邊框寬度border，到邊框距離margin，内容區寬度width，内容區高度height（一般由内容決定），元素顯示方式display，顔色color。

​ 每個距離又可分為top、bottom、left、right，表示方法如border-top。

​ 盒子模型中有塊級元素、行内元素和行内塊級元素。

​ display為block時設為塊級元素，為行内元素時設為inline，行内塊級元素時設為inline-block。

（1）塊級元素

​ 塊級元素會預設占一行高度，一般一行内隻有一個塊級元素，添加新的塊級元素時會自動換行，如一個元件預設為一個塊級元素，也可以修改一個元素的display屬性為block，将一個元素強制設為塊級元素。

​ 塊級元素的屬性：

<!--設定邊框為10rpx,内外邊距均為30rpx的塊級元素-->
<view style="border:solid 10rpx;margin:30rpx;padding:30rpx;">塊級元素</view>
<!--當設定寬度不足時-->
<view style="width: 200rpx;border:solid 3rpx;">文本文本文本文本文本文本文本文本文本文本文本</view>
           

效果如下：

（2）行内元素

​ 行内元素和其他非塊級元素都在一行上；隻設定左右margin和左右padding；其他屬性不能直接設定，由内容決定。

​ 上述代碼增加為：

<!--設定邊框為10rpx,内外邊距均為30rpx的塊級元素-->
<view style="border:solid 10rpx;margin:30rpx;padding:30rpx;">塊級元素</view>
<!--當設定寬度不足時-->
<view style="width: 200rpx;border:solid 3rpx;">文本文本文本文本文本文本文本文本文本文本文本文本文本</view>
<!--通過display修改屬性-->
前面的文字<view style="border: solid 3rpx;margin:20rpx;display: inline;">文本文本文本文本文本文本文本文本文本文本文本文本文本</view>後面的文字
           

​ 效果如下：

（3）行内塊級元素

​ 即将一個塊級元素設定在行内，上述代碼增加如下：

<!--設定邊框為10rpx,内外邊距均為30rpx的塊級元素-->
<view style="border:solid 10rpx;margin:30rpx;padding:30rpx;">塊級元素</view>
<!--當設定寬度不足時-->
<view style="width: 200rpx;border:solid 3rpx;">文本文本文本文本文本文本文本文本文本文本文本文本文本</view>
<!--通過display修改屬性-->
前面的文字<view style="border: solid 3rpx;margin:20rpx;display: inline;">文本文本文本文本文本文本文本文本文本文本文本文本文本</view>後面的文字
<view>換行</view>
<!--行内塊級元素示範-->
這一行内有行内塊級元素<view style="border: solid 3rpx;width: 200rpx;;display: inline-block;">行内塊級元素</view>這一行内有行内塊級元素
           

​ 效果如下：

三、浮動和定位

(1)浮動

​ 浮動不是正常流布局，通過設定float屬性，浮動框可以向左或向右移動，并被文檔包裹。

​ 父級元素高度忽略浮動元素，為解決這一問題，設定了浮動屬性clear。

​ 示例代碼如下：

<!--浮動元素被包圍-->
<view>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    <view style="display: block;float: left;border: solid 2rpx;margin: 20rpx;">浮動框</view>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>
<!--高度忽略浮動元素，是以浮動元素不在框内-->
<view style="border: solid 2rpx;">
    <view>其他元素</view>
    <view style="float: left;">浮動元素</view>
</view>

<view>換行</view>
<view>換行</view>
<view>換行</view>

<!--clear屬性的浮動元素會被父級元素計算高度-->
<view style="border: solid 2rpx;">
    <view>其他元素</view>
    <view style="float: left;">浮動元素</view>
    <view style="clear: left;">清除左側浮動元素</view>
</view>
           

​ 效果：1.浮動元素被包圍

​ 2.浮動元素高度不被父級元素計算，不在框内

​ 3.清除浮動元素會被父級元素高度計算

（2）定位

​ 元素的定位有position屬性控制，會影響元素框生成的方法：

position值	意義
static	元素框正常生成
relative	元素框偏移某個距離，形狀不變，原空間被保留
absolute	元素框從文檔流中完全删除，并相對于其包含塊定位
fixed	元素框偏移，且從文檔流完全删除

​ 示例代碼：

<!--relative-->
<view style="border: solid 2rpx;">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    <view style="position: relative;top: 10rpx;left: 10rpx;">relative</view>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

<view>換行</view>
<view>換行</view>
<view>換行</view>

<!--absolute-->
<view style="border: solid 2rpx;">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    <view style="position: absolute;top: 10rpx;left: 10rpx;">absolute</view>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

<view>換行</view>
<view>換行</view>
<view>換行</view>

<!--fixed-->
<view style="border: solid 2rpx;">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    <view style="position: fixed;bottom: 10rpx;left: 10rpx;">fixed</view>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>
           

可以看到absolute有重合但會顯示，relative獨占一行，重合會消失，放在底部可以顯示。

四、Flex布局

​ Flex布局主要由容器和項目構成，采用Flex布局的元素，稱為Flex容器。

​ 容器預設存在水準的主軸（main axis）和垂直的交叉軸（cross axis）。

​ 主軸始于main start邊，結束于main end邊。

​ 交叉軸始于cross start邊，結束于cross end邊。

​ 主軸上占據的空間為main size，交叉軸占據空間cross size。

1.容器屬性：

（1）display：指定元素是否為flex布局

值	意義
flex	産生塊級flex布局
inline-flex	産生行内flex布局

（2）flex-direction：指定主軸方向，決定項目排列方式

值	意義
row	主軸為水準方向，起點在左端
row-reverse	主軸為水準方向，起點在右端
colum	主軸為豎直方向，起點在上沿
colum-reverse	主軸為豎直方向，起點在下沿

（3）flex-wrap ：排列換行設定

值	意義
nowrap	不換行（預設值）
wrap	換行，第一行在上方
wrap-reverse	換行，第一行在下方

（4）flex-flow：指定主軸方式和排列換行設定

選擇一個flex-direction的值，選擇一個flex-wrap的值，如：flex-flow：row，wrap;

nowrap可省略不寫。

無序

（5）justify-content： 定義項目在主軸上的對齊方式

值	意義
flex-start	左對齊（預設值）
flex-end	右對齊
center	居中
space-between	兩端對其，項目間隔相等
space-around	每個項目兩側的間隔相等

（6）align-items： 定義項目在交叉軸上的對其方式

值	意義
flex-start	交叉軸的起點對其
flex-end	交叉軸的終點對其
center	交叉軸的中點對其
baseline	項目根據他們的第一行文字的基線對其
stretch	若項目未設定高度，則在交叉軸拉伸填充整個容器

（7）align-centent： 定義多根軸線的對其方式

值	意義
flex-start	與交叉軸的起點對其
flex-end	與交叉軸的終點對其
center	與交叉軸的中點對其
space-between	與交叉軸兩端對其，間隔相等
space-around	每根軸線兩側的間隔相等
stretch	軸線填滿整個交叉軸，拉伸直至填滿整個容器

（8）關于文法格式

.mybox{display:flex;}
.mybox{flex-flow:wrap row-reserve;}
           

2.項目屬性：

（1）order ：定義項目的排序順序，值為

（2）flex-grow ：定義項目放大比例，值為,預設為0

（3）flex-shrink ：定義項目的縮小比例，值為

（4）flex-basis ：定義在配置設定多餘空間之前，項目占據的主軸空間，值為或auto

（5）flex ：包含三個值，flex-grow，flex-shrink，flex-basis

（6）align-self ：用來設定單獨的伸縮項目在交叉軸上的對齊方式，可覆寫預設的align-items屬性。取值除auto外與align-items完全一緻。

值	意義
flex-start	交叉軸的起點對其
flex-end	交叉軸的終點對其
center	交叉軸的中點對其
baseline	項目根據他們的第一行文字的基線對其
stretch	若項目未設定高度，則在交叉軸拉伸填充整個容器