1.盒子模型
微信小程序的視圖層由WXML和WXSS組成.
WXSS(具有css的大部分特性)是基于CSS拓展的樣式語言 ,用于描述WXML的組成樣式,決定WXML的組件如何顯示.
盒子模型結(jié)構(gòu):
盒子模型元素:
2.塊級元素與行內(nèi)元素
塊級元素
塊級元素默認(rèn)占一行高度，一行內(nèi)通常只有一個(gè)塊級元素（浮動后除外），添加新級元素時(shí)，會自動換行，塊級元素一般作為盒子出現(xiàn)。塊級元素的特點(diǎn)如下，
（1）一個(gè)塊級元素占一行。
（2）塊級元素的默認(rèn)高度由內(nèi)容決定，除非自定義高度。
（3）塊級元素的默認(rèn)寬度是父級元素的內(nèi)容區(qū)寬度，除非自定義寬度。
（4）塊級元素的寬度、高度、外邊距及內(nèi)邊距都可以自定義設(shè)置。
（5）塊級元素可以容納塊級元素和行內(nèi)元素。
<view/>組件默認(rèn)為塊級元素，使用<view/>組件演示盒子模型及塊級元素碼如下：
<view style="border:1px solid #f00">塊級元素1</view>
<view style="border:1px solid #0f0;margin: 15px;padding:20px;">塊級元素2</view>
<view style="border:1px solid #00f;width:200px;height:80px">塊級元素3</view>
<view style="border:1px solid #ccc">
<view style="height: 60px;">塊級元素4</view>
</view>
<view style="border:1px solid #f00;width: 100px;background-color: #ccc;">父級元素高度隨內(nèi)容決定,內(nèi)容為文本</view>
實(shí)現(xiàn)效果:
行內(nèi)元素:
行內(nèi)元素，不必從新一行開始，通常會與前后的其他行內(nèi)元素顯示在同一行中，它們不有獨(dú)立的區(qū)域，僅靠自身內(nèi)容支撐結(jié)構(gòu)，一般不可以設(shè)置大小，常用于控制頁面中文本的式。將一個(gè)元素的display屬性設(shè)置為inlime后，該元素即被設(shè)置為行內(nèi)元素。行內(nèi)元素的點(diǎn)如下:
（1）行內(nèi)元素不能被設(shè)置高度和寬度，其高度和寬度由內(nèi)容決定。
（2）行內(nèi)元素內(nèi)不能放置塊級元素，只級容納文本或其他行內(nèi)元素。
（3）同一塊內(nèi)，行內(nèi)元素和其他行內(nèi)元素顯示在同一行。
<text/>組件默認(rèn)為行內(nèi)元素，使用<view/>及<lexV/>組件演示盒子模型及行內(nèi)元素的示例代碼如下：
<view style="padding: 20px;">
<text style="border:1px solid #f00">文本1</text>
<text style="border:1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">行內(nèi)元素</view>顯示不完
</view>
?實(shí)現(xiàn)效果:
行內(nèi)塊元素:
<view>
元素顯示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">塊級元素,行內(nèi)元素和行內(nèi)塊元素
</view>三種類型
</view>?實(shí)現(xiàn)效果:
3.浮動與定位
左浮動:使用float:left
wxml代碼:
<view>box1,box2,box3沒浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="border:1px solid #0f0">box1</view>
<view style="border:1px solid #0f0">box2</view>
<view style="border:1px solid #0f0">box3</view>
</view>
<view>box1左浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="float:left;border:1px solid #0f0">box1</view>
<view style="border:1px solid #0f0">box2</view>
<view style="border:1px solid #0f0">box3</view>
</view>
<view>box1 box2左浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="float:left;border:1px solid #0f0">box1</view>
<view style="float:left;border:1px solid #0f0">box2</view>
<view style="border:1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3左浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="float:left;border:1px solid #0f0">box1</view>
<view style="float:left;border:1px solid #0f0">box2</view>
<view style="float:left;border:1px solid #0f0">box3</view>
</view>
?實(shí)現(xiàn)效果:
右浮動:使用float:right
<view>box1右浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="float:right;border:1px solid #0f0">box1</view>
<view style="border:1px solid #0f0">box2</view>
<view style="border:1px solid #0f0">box3</view>
</view>清除浮動:使用clear屬性
其中,left--清除左浮動的影響;
? ? ? ? right--清除右浮動的影響;
? ? ? ? both--同時(shí)清除左右浮動;
? ? ? ? none--不清除浮動.
<view>box1 box2左浮動box3清除浮動</view>
<view style="border:1px solid #f00;padding:5px">
<view style="float:left;border:1px solid #0f0">box1</view>
<view style="float:left;border:1px solid #0f0">box2</view>
<view style="clear:left;border:1px solid #0f0">box3</view>
</view>4.元素定位
浮動布局雖然靈活，但無法對元素的位置進(jìn)行精確的控制。在CSS中，通過position屬性可以實(shí)現(xiàn)對頁面元素的精確定位?；靖袷饺缦拢?/p>
{position:static /relative/ labsolute/ fixed}
其中，static一 默認(rèn)值，該元素按照標(biāo)準(zhǔn)流進(jìn)行布局；
relative一 相對定位，相對于它在原文檔流的位置進(jìn)行定位，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它；
absolute一 絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位，絕對定位的盒子
從標(biāo)準(zhǔn)流中脫離，它對其后的兄弟盒子的定位沒有影響；
fixed一 固定定位，相對于瀏覽器窗口進(jìn)行定位。
對boxl、box2、box3進(jìn)行元素靜態(tài)定位，示例代碼如下：
//進(jìn)行相對定位?
<view style="border:1px solid#0f0;width:100px;height:100px">box1</view>
<view style="border:1px solid#0f0;width:100px;height:100px;position:relative;left:30px;top:30px;">box2</view>
<view style="border:1px solid#0f0;width:100px;height:100px">box3</view>
?實(shí)現(xiàn)效果:
?
5.flex布局
flex布局模型
flex容器支持的屬性
?1).display
display 用來指定元素是否為fex布局，語法格式為：
? .box{display:flex /inline-flex;}
其中，flex一塊級 flex布局，該元素變?yōu)閺椥院凶樱?/p>
? ?inline-flex一行內(nèi)fex布局，行內(nèi)容器符合行內(nèi)元素的特征，同時(shí)在容器內(nèi)又符合
flex布局規(guī)范。
設(shè)置了flex布局之后，子元素的foat、clear和 vertical-align屬性將失效。
2). flex - direction
flex-direction用于設(shè)置主軸的方向，即項(xiàng)目排列的方向，語法格式為：
? ? ? ? ?.box{ flex-direction: row /row- reverse /column /column -reverse;}
其中，row一主軸為水平方向，起點(diǎn)在左端，當(dāng)元素設(shè)置為fex布局時(shí)，主軸默認(rèn)為row；
? ? ? ? ?row -reverse:主軸為水平方向，起點(diǎn)在右端；
? ? ? ? ?column:主軸為垂直方向，起點(diǎn)在頂端；
? ? ? ? ?column -reverse:主軸為垂直方向，起點(diǎn)在底端。
圖所示為元素在不同主軸方向下的顯示效果。
3). flex - wrap
flex-wrap 用來指定當(dāng)項(xiàng)目在一根軸線的排列位置不夠時(shí)，項(xiàng)目是否換行，其語法格式如下
.box{ flex -wrap:nowrap lwrap lwrap -reverse;}
其中，nowrap-不換行，默認(rèn)值；
wrap一換行，第一行在上方；
wrap - reverse一換行，第一行在下方。
當(dāng)設(shè)置換行時(shí)，還需要設(shè)置align-item屬性來配合自動換行，但align-item的值不能火"stretch"。
flex-wrap 不同值的顯示效果如圖所示。
4). flex-flow
flex-flow 是flex-direction 和fex-wrap 的簡寫形式，默認(rèn)值為row nowrap。語法格式如下：
.box{flex -flow: <flex -direction>/l<flex-wrap >;)示例代碼如下：
.box{flex-flow:row nowrap;} //水平方向不換行
.box{flex-flow:row-reverse wrap;}//水平方向逆方向換行
.box{flex-flow:column wrap -reverse;}//垂直方向逆方向換行5). justify -content
justify-content 用于定義項(xiàng)目在主軸上的對齊方式。語法格式如下：
.box{justify -content:flex -start/flex -end/center /space -betwee/space -around;}其中，justify-content一與主軸方向有關(guān)，默認(rèn)主軸水平對齊，方向從左到右；
? ? flex -start一左對齊，默認(rèn)值;
? ? flex-end一右對齊；
? ? center—居中;
? ? space - between:? 兩端對齊，項(xiàng)目之間的間隔都相等；
? ? space - around: 每個(gè)項(xiàng)目兩側(cè)的間隔相等。
圖所示為justify-content不同值的顯示效果。
6). align -items
align-items 用于指定項(xiàng)目在交叉軸上的對齊方式，語法格式如下：
.box{align-items:flex-start /flex-end /center /baseline /stretch;}其中，align—items--與交叉軸方向有關(guān)，默認(rèn)交叉由上到下
flex-start-交叉軸起點(diǎn)對齊；
flex-end——交叉軸終點(diǎn)對齊;
center一交叉軸中線對齊；
baseline一項(xiàng)目根據(jù)它們第一行文字的基線對齊；
stretch——如果項(xiàng)目未設(shè)置高度或設(shè)置為auto，項(xiàng)目將在交叉軸方向拉伸填充容器，此
默認(rèn)值。
示例代碼如下：
wxml代碼:
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item2">3</view>
<view class="item item2">4</view>
</view>wxss代碼:
.cont1{
display: flex;
flex-direction: row;
align-items: baseline;
}
.item{
background-color: #ccc;
border:1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: flex-end;
}
.item4{
height: 120px;
}運(yùn)行結(jié)果為:?
7).align-content
用來定義項(xiàng)目有多根軸線
.box{align-content:flex-start/flex-end/center/space-between/space-around/stretch}
6.項(xiàng)目屬性
容器內(nèi)項(xiàng)目屬性:
1).order
定義項(xiàng)目的排序,數(shù)值越小,排列越靠前,默認(rèn)值為0
//語法格式:
.item{order:<number>;}代碼:?
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item"style="order:1">1</view>
<view class="item"style="order:3">2</view>
<view class="item"style="order:2">3</view>
<view class="item">4</view>
</view>?結(jié)果如圖:
?2).flex-grow
定義項(xiàng)目的放大比例,默認(rèn)值為0即不放大
.item{flex-grow;<number>;}3). flex -shrink
flex-shrink 用來定義項(xiàng)目的縮小比例，默認(rèn)值為1，如果空間不足，該項(xiàng)目將被縮小語法格式如下：
.item{flex-shrink:<number>;}示例代碼如下：
<view class ="cont1">
<view class="item">1</view>
<view class ="item">2 </view>
<view class="item">3</view>
<view class="item">4 </view>
</view>
<view class ="cont1">
<view class ="item" >1 </view>
<view class ="item" style ="flex-shrink:2" >2 </view >
<view class ="item" style ="flex-shrink:1" >3 </view >
<view class ="item"style ="flex-shrink:4">4 </view >
</view>
結(jié)果如圖
?
4).flex-basis
用來定義伸縮項(xiàng)目的基準(zhǔn)值,剩余的空間將按比例進(jìn)行縮放
.item{flex-basis:<number>/auto;}5).flex
flex是flex-grow,flex-shrink和flex-basis的簡寫
.item{flex:<flex-grow>/<flex-shrink>/<flex-basis>;}6).align-self
用來指定單獨(dú)的伸縮項(xiàng)目，在交叉軸上的對齊方式文章來源：http://www.zghlxwxcb.cn/news/detail-851685.html
.item{align-self;auto/flex-start/flex-end/center/baseline/stretch;}總結(jié):
本章首先介紹了頁面布局中最基本的盒子模型，接下來介紹了浮動和定位，最后重點(diǎn)講了flex布局的基本原理容器和項(xiàng)目的相關(guān)屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-851685.html
到了這里，關(guān)于第三章.微信小程序頁面布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
