第三章总结

3.页面布局

3.1盒子模型

模型结构

模型元素

3.2块级元素与行内块元素

3.2.1块级元素

wxml代码：

<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;">
  父级元素高度随内容决定，内容为文本</view>

结果

3.2.2行内元素

wxml代码

  <view style="padding: 20px">
  <text style="border: 1px solid #f00;">行内元素1</text>
  <text style="border: 1px solid #0f0;margin: 10px;padding: 5px">行内元素2</text>
  <text style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全，自动换行显示
  </view>

结果

3.2.3行内块元素

wxml代码

  <view>
  元素显示方式的<view style="display:inline-block;border: 1px solid #f00;margin: 10px;padding: 10px; width: 200px">块级元素、行内元素和行内块元素</view>三种类型。
  </view>

结果

3.3浮动与定位

3.3.1元素浮动与清除

1.浮动格式：

{float:none|left|right;}

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>

结果

2.清除格式：

{clear:left|right|both|none}

wxml代码

<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>
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;"clear="clear-float">
  <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>

结果

3.3.2元素定位

格式：

{position:static|relative|absolute|fixed}

wxml代码

<!--三个元素未定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
<!--box2绝对定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
<!--box2相对定位-->
<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固定定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

结果

3.4flex布局

3.4.1容器属性

1.display

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

2.flex-direction

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

3.flex-wrap

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

4.flex-flow

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

5.justify-content

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

6.align-items

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

wxml代码

<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">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;
}

结果

7.align-content

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

3.4.2项目属性

1.order

.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>

2.flex-grow

.item{flex-grow:<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="order:3" style="flex-grow:1">2</view>
    <view class="item" style="order:2" style="flex-grow:2">3</view>
    <view class="item">4</view>
</view>

3.flex-shrink

.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="order:3" style="flex-shrink:2">2</view>
    <view class="item" style="order:2" style="flex-shrink:1">3</view>
    <view class="item" style="order:2" style="flex-shrink:4">4</view>
</view>

4.flex-basis

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

<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="order:3" style="flex-basis:100px">2</view>
    <view class="item" style="order:2" style="flex-basis:200px">3</view>
    <view class="item">4</view>
</view>

5.flex

语法格式：

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

6.align-self

语法格式：

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}