第三章总结

盒子模型（4部分）

内容

内边距

边框

外边框

块级元素与行内元素

块级元素

1.一个块级元素占一行

2.块级元素的默认高度有内容决定，除非自定义高度

3.块级元素的默认高度是父级元素的内容区宽度，除非自定义高度

4.块级元素的高度。宽度。外边距及内边距都可以自定义设置。

5.块级元素可以容纳块级元素和行内元素

代码

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

运行结果

行内元素

1.行内元素不能被设置高度和宽度，其高度和宽度由内容决定

2.行内元素内不能放置块级元素，只能容纳文本或其他行内元素

3.同一块内，行内元素和其他行内元素显示在同一行

代码

<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">块级元素设置为行内元素</view>一行显示不全，自动换行显示</view>

运行结果

行内块元素

同时拥有行内元素和块元素特点可设置高度宽度

代码

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

运行结果

浮动与定位

元素浮动与清除

none--默认值，不浮动

left--左浮动

right--右浮动

代码

<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: right;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>

运行结果

清除元素

clear:

left--清除左浮动

right--清除右浮动

both--清除两边浮动

代码

wxml

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

wxss

.clearfloat::after{display:block;clear:both;height:0;content:""}

运行截图

元素定位

static--默认值

relative--相对定位

absolute--绝对定位

fixed--固定定位

未定位代码

<!--三个元素均未定位 static-->
<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>

运行结果

对box1.2.3进行元素相对定位代码

<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">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

运行截图

对box1.2.3进行元素绝对定位代码

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

运行截图

对box1.2.3进行元素固定定位代码

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

运行截图

容器属性

1.dispiay

flex--块级flex布局

inline--flex行内flex布局

2.flex--direction

ron--主轴为水平方向，起点在左边

ron--reverse--主轴为水平方向，七点在右端

column--主轴为垂直方向，起点在顶端

column--reverse--主轴为垂直方向，起点在底端

3.flex--wrap

nowrap--不换行默认值

wrap--换行，第一行在上方

wrap--reverse--换行，第一行在下方

4.flex--flow

是flex--direction和flex--wrap的简写形式，默认值为row nowrap

5.justify--content

flex--start---左对齐，默认值

center--居中

flex--end--右对齐

space--between--两端对齐，项目之间间隔相等

space--around--每个项目两侧的间隔相等

6.aling--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{}

运行截图

项目属性

flex-grow

定义项目放大比例

代码

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

运行结果

flex-basis

用来定义伸缩项目的基准值

代码

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

flex-shrink

用来定义项目的缩小比例

运行截图

代码

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