第三章总结

1.盒子模型

由内容， 内边距，边框，和外边距4部分组成，由上下左右四边边距，分别top,bottom,left,right。

2.块级元素与行内元素

 块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外),添加新的块级元素时,会自动换行,块级元素一般作为盒子出现。

2.1块级元素代码练习

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

 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>
  <view style="border: 1px solid #00f;display: inline">块级元素设置为行内元素</view>
</view>

2.3行内块元素 

行内款元素可以被设置高度、宽度、内边距和外边距

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

3.浮动与定位

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。

3.1 元素浮动与清除

代码

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

3.2 元素定位

对box1 box2 box2进行元素相对定位

代码

wxml代码

<!--三个元素均未定位 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>
 
<view>-----------</view>
 
<!--box2元素相对定位 relative top:30px left: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>

对box1 box2 box2进行元素绝对定位

代码

wxml代码

<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 box2 box2进行元素固定定位

wxml代码

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

4.flex布局

flex布局模型 

4.1 容器属性 

1.display 

指定元素是否为flex布局

语法格式为

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

2.flex-direction

其中row----主轴为水平方向，起点在左端，主轴默认为row

row-reverse-----主轴为水平方向，起点在右端

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

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

3.flex-wrap

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其中，nowrap不换行，默认值。