前言（也可以说是废话）：最近一直在做小程序相关项目，所以单对布局方面做一下记录。最早做的时候，使用的是传统布局方式，但是自从使用flex布局之后，发觉flex布局确实比较好用，而且比较容易记忆，如果只是看flex布局相关，可直接往下滑⬇️⬇️⤵️，也欢迎提出宝贵意见，或者指正错误。
一、组件属性
组件的属性主要有以下5种width height padding margin border
1>width 是宽度 指的是内容的宽度
2>height 高度 指的是内容的高度
3>padding 是指的内边距（主要是用在父元素和子元素之间的关系中）
padding: top right bottom left; 顺序
padding: 20rpx 30rpx 40rpx 70rpx;
padding-top:20rpx;
4>margin 是指的外边距 (主要用在 兄弟元素之间)
5>border指的是边框
border属性能够被拆开，有两大种拆开的方式：
1）按3要素:border-width、border-style(solid, dashed,dotted)、border-color
2）按方向：border-top、border-right、border-bottom、border-left
border: 1rpx solid red;
剩下的background（背景：颜色、图片）font（字体：大小、行高、样式）等等
下面以图的形式展示一下这几个属性
二、css布局
css常规布局有三种 ：普通流、浮动、定位 还有一种是flex布局(是一种新的布局方式)
1、普通流
css的默认文档流(普通流):网页中的各种元素按照自左往右，自上而下的方式进行布局
在普通流里，块级元素自上而下排列，行内元素自左往右排列
块级元素(block)：
1>霸占一行，不能与其他任何元素并列
2>能设置宽高，如果不设置宽默认为屏幕宽度
行内元素:
inline:与其它行内元素并排，不能设置宽高，默认的宽度就是文字的宽度
inline-block:与其它行内元素并排，能设置宽高
小程序中的行内元素:icon,text,input,label,image(可以设置宽高)
其他的大部分都是块级元素:view,scroll-view,textarea等等（提示不全）
可以相互转化 display:block inline_block inline
css中的块级元素:h1~h6、div、p、ul、li、ol、hr、dl、dt、dd、form
css中的行内元素:span(inline-block)、strong、font、b、a、input、textarea、u、img(inline_block)、i、em、br、label
2、浮动
浮动是css布局里面用的最多的属性
浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素
float: left; float:right;
1>浮动的元素脱标
（脱离了标准流,是可以设置宽高的无论是块级元素还是行内元素）
例子:先添加绿色盒子 然后添加蓝色盒子
绿色盒子float:left 蓝色盒子没有float 鲁塞盒子脱离了标准文档流，所以蓝色盒子就出现在标准文档流的第一个盒子，所以就渲染在了页面的左上方
定位有三种，分别是相对定位、绝对定位、固定定位
2>浮动的元素是相互贴靠的（上图）
三、定位
1、相对定位
position:relative;
2、绝对定位
position:absolute
3、固定定位
position:fixed
1>相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整
相对定位是不脱标的，真实的位置是存在的，只不过是影子出去了
也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
position:relative;→必须先声明，自己要相对定位了，
left:100rpx;→然后进行调整。
top:150rpx;→然后进行调整。
right:100rpx;
bottom:100rpx;
2>绝对定位
(自动忽略px 小程序中用rpx)
position:absolute;
top:100rpx;
left:140rpx;
绝对定位是脱离标准文档流的，所以可以设置宽高
参考点:
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角
一个绝对定位的元素，如果父辈元素也是定位了的元素（相对、绝对、固定），那么将以父辈这个元素，为参考点
栗子:下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。p将无视父亲的padding，在border内侧为参考点，进行定位
3>固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。固定定位脱标！
position:fixed;
top:0rpx;
left:0rpx;
4>z-index
z-index值表示谁压着谁。数值大的压盖住数值小的。
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
z-index值没有单位，就是一个正整数。默认的z-index值是0。
如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用。
没有单位：
z-index: 988;
四、flex布局
flex布局相对比较简单，首先要设置元素为display:flex，该元素的子元素就会按照flex布局来展示。
flex布局主要属性如下:
举例
.test {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
align-content: center;
}
借用大神的图，如有侵权，请告知删除！！！！！！！
1、flex-direction：元素布局方向，默认是row
2、justify-content：元素在主轴的排列方式，如果flex-direction是row，主轴方向就是x轴，如果flex-direction是column，主轴方向是y轴。默认是flex-start
3、align-items：元素在与主轴垂直的轴（交叉轴）的排列方式，如果flex-direction是row，align-items就是相对于y轴，如果flex-direction是column，align-items就是相对于x轴的排列。默认是flex-start
4、flex-wrap：元素换行排列
5、align-content：弹性布局中的排列，需要和flex-wrap：wrap或者wrap-reverse配合使用
