第三章：微信小程序页面布局

一：盒子模型

二：块级元素与行内元素

1.块级元素：

2.行内元素：

3.行内块元素：

三：浮动与定位

1.浮动

 
 <view style='height: 150px;'>===============================================================浮动==================================</view>
 <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="border: 1px solid #0f0;float: left;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box2浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;float: left;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>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;float: left;">box3</view>
</view>
 
<view>box1,box2,box3浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="border: 1px solid #0f0;float: left;">box1</view>
<view style="border: 1px solid #0f0;float: left;">box2</view>
<view style="border: 1px solid #0f0;float: left;">box3</view>
</view>

2.清除浮动

方式1：

<view>box1浮动,box2浮动,box3清除浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="border: 1px solid #0f0;float: left;">box1</view>
<view style="border: 1px solid #0f0;float: left;">box2</view>
<view style="border: 1px solid #0f0;clear: left;">box3</view>
</view>

方式2：

 
<view>box1浮动,box2浮动,box3浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00; padding: 5px;"class="clear-float">
<view style="border: 1px solid #0f0;float: left;">box1</view>
<view style="border: 1px solid #0f0;float: left;">box2</view>
<view style="border: 1px solid #0f0;float: left;">box3</view>
</view>
 
 
 
/* pages/jjj/jjj.wxss */
 
.clear-float::after{
display: block;clear: both;height: 0;content: "";
}

2.定位

相对定位---position: relative;，

绝对定位---position: absolute;，

固定定位---position: fixed;

<view style='height: 150px;'>===============================================================定位==================================</view>
 
<!-- box2元素相对定位  position: relative;left: 30px;top: 30px;-->
 
<!-- <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> -->
 
 
<!-- box2元素绝对定位  position: absolute;left: 30px;top: 30px;-->
 
<!-- <view style="border: 1px solid #ff0;width: 100px;height: 100px">box4</view>
<view style="border: 1px solid #ff0;width: 100px;height: 100px; position: absolute;left: 30px;top: 30px;">box5</view>
<view style="border: 1px solid #ff0;width: 100px;height: 100px">box6</view> -->
 
 
 
<!-- box2元素绝对定位  position: fixed;left: 30px;top: 30px;-->
<view style="border: 1px solid #00f;width: 100px;height: 100px">box4</view>
<view style="border: 1px solid #00f;width: 100px;height: 100px; position: fixed;left: 30px;top: 30px;">box5</view>
<view style="border: 1px solid #00f;width: 100px;height: 100px">box6</view>

四：flex布局

(1)容器属性

1.display

display用来指定元素是否为flex布局，语法格式为：

.box{display: flex|inline-flex;}

2.flex-direction

flex-direction用于设置主轴方向，即项目排列的方向，语法格式为

.box{flex-direction:row|row-reverse|column|column-reverse ;}

不同值的显示效果

3.flex-wrap

用来指定当项目在一根轴线的排列位置不够时，项目是否换行语法格式为

.box{flex-wrap:nowrap|wrap| wrap-reverse;}

不同值的显示效果

4.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap。语法格式如下：

.box{flex-flow: <flex-direction>||<flex-wrap>;}

5.justify-content

justify-content用于定义项目在主轴上的对齐方式。语法格式如下：

.box{justify-content:flex-start|flex-end|center|space-between| space-around;}

不同值的显示效果

6.align-items

align-items用于指定项目在交叉轴上的对齐方式，语法格式如下

.box{align-items:flex-start |flex-end|center|baseline|stretch ;}

7.align-content

align-content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch ;}

不同值的显示效果

(2)项目属性

1.order

order属性定义的排序顺序，数值越小，排列越靠前，默认值为0语法格式为

.item{order: <number>;}

2.flex-grow

flex-grow定义项目放大比例，默认值0，即不放大。语法格式如下：

.item{flex-grow：<number>;}

3.flex-shrink

flex-shrink定义项目放大比例，默认值1，即不放大。语法格式如下：

.item{flex-shrink：<number>;}

4.flex-basis

flex-basis定义项目放大比例，默认值1，即不放大。语法格式如下：

.item{flex-basis：<number>|auto;}

5.flex

flex属性是flex-grow ，flex-shrink ，flex-basis的简写，其默认值分别为0，1，auto。语法格式为

.item{flex：<flex-grow>|<flex-shrink>|<flex-basis>;}