盒子模型
块级元素
块级元素默认占一行高度，一般一行内只有一个块级元素，当再添加新的块级元素时，新元素会自动换行显示。
小程序中</view>组件默认为块级元素，通过设置display:block将一个元素强制设置为块级元素。
浮动 或者设置绝对定位 可以让行内元素 变成 块级元素
可以设置宽度 和 高度；
宽度默认为width+marginLeft+marginRight+paddingLeft+paddingRight刚好等于父级元素内容区宽度
行内元素
小程序中</text>组件默认为块级元素，通过设置display:inline将一个元素设置为行内元素。
行内元素和其他非块级元素都在一行上；
盒子模型中高度、宽度、上下margin、上下padding设置均无效，只能设置左右margin和左右padding；
宽度就是文字或图片的宽度，不可改变；行内元素宽度、高度都不能直接设置；
行内元素只能容纳文本或其他行内元素，在行内元素中不能放置块级元素；
行内块元素
通过设置display:inline-block将一个元素设置为行内块元素。行内块元素可设置宽、高、内边距、外边距；
定位position
static
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中，static是position的默认值
relative
相对定位 参照物是本身 原本所占的空间仍保留
absolute
绝对定位 参考物是父级元素
fixed
参考点是整个页面，元素框的表现类似于将position设置为absolute
Flex布局
display:flex;
flex-direction: 改变主轴的方向
flex-wrap: warp 换行 nowarp不换行 控制项目中是否换行
justify-content 处理富余空间
flex-flow: row warp 是flex-direction 和 flex-wrap的组合属性
align-items: 设置项目在交叉轴上的位置 flex-start flex-end center
align-content: 如果有多根主轴，设置多根轴线的对齐方式 flex-start flex-end center
项目中的属性：
order 改变项目中主轴上的顺序 值越大 越靠近主轴的终点
flex-grow 分配富余空间
flex-shrink 设置压缩的比例
flex-basis 设置项目在主轴占据的宽度
align-self: 单独设置某一个项目在交叉轴上的位置
