一、布局方式：

1、flex布局基础 2、相对定位和绝对定位 3、浮动布局

二、flex布局基础：

1、flex的容器和元素 容器 —》 元素

2、flex的容器属性详解 flex-direction：决定元素的排列方向 flex-wrap：决定元素如何换行(排列不下时) flex-flow是flex-direction和flex-wrap的简写 justify-content：元素在主轴上的对齐方式 align-items：元素在交叉轴的对齐方式

3、flex的元素属性详解 flex-grow：当有多余空间时，元素的放大比例 flex-shrink：当空间不足时，元素的缩小比例 flex-basis：元素在主轴上占据的比例 flex这三个属性grow、shrink、basis的简写 order：定义元素的排列顺序 align-self：定义元素自身的对齐方式，会复写justify-content、align-items属性

4、flex布局实战 /* 使用flex布局 / display: flex; / 元素方向：row：横向，column：竖向 / flex-direction: row; / 元素换行：nowrap：默认不换行，wrap：换行，wrap-reverse：反转 */ flex-wrap: wrap;

/* 容器属性简写 / / flex-flow: row nowrap; / / 元素在主轴的对齐方式:flex-start/flex-end/center/space-around/space-between / justify-content: space-between; / 元素在交叉轴的对齐方式:flex-start/flex-end/center/stretch/baseline */ align-items: flex-start;

/* 多余空间，默认等比放大*/ /* flex-grow: 0; / / 空间不足，默认等比缩小 / / flex-shrink: 1; / / 元素在主轴上占据的比例 / / flex-basis: 0; */

/* 元素属性简写 / flex: 1 1 50rpx; / 排序 / / order: 4; / / 自身对齐方式 */ align-self: flex-start;

三、相对定位和绝对定位：

1、理解相对定位和绝对定位 2、相对定位、绝对定位的编码实战 注意事项： 相对定位的元素是相对自身进行定位，参照物是自己。 绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。 /* 相对定位：相对自身视图 */ position: relative; left: 150rpx; top: 100rpx;

/* 绝对定位：相对父视图 */ position: absolute; left: 50rpx; top: 50rpx;