微信小程序--布局基础&样式基础

一、布局基础

1. flex容器属性
   flex-direction： 决定元素的排列方向,同时决定主轴与交叉轴的方向
   row：横向排列，column：纵向排列
   flex-wrap： 决定元素如何换行 (排列不下时)
   nowrap：不换行，warp：自动换行，reverse：反转换行
   flex-flow： flex-direction和flex-wrap的简写
   例如： flex-flow:row wrap;
justify-content： 元素在主轴上的对齐方式
   center: 在主轴上居中对齐，
   flex-start(flex-end)：从左(右)开始对齐
   space-around：每个元素的padding相同
   space-between：每个元素间隔相同
   align-items： 元素在交叉轴的对齐方式
   flex-start(flex-end)：从上(下)开始对齐
   baseline：根据元素内文本对齐
2. flex元素属性
   flex-grow：当有多余空间时，元素的放大比例
   flex-shrink： 当空间不足时，元素的缩小比例
   flex-basis： 元素在主轴上占据的空间
   flex： 是 grow、shrink、basis的简写
   例如：flex: 0 1 50px;
order定义元素的排列顺序,默认为0
   align-self 定义元素自身的对齐方式
3. 相对定位和绝对定位
   相对定位的元素是相对自身进行定位，参照物是自己。
   例如：

  position: relative;      // 相对定位
  left: 150rpx;               // 与原位置的左端距离150
  top: 50rpx;                // 与原位置的上端距离50

    绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。

例如：

  position: absolute;      // 绝对定位
  left: 50rpx;                // 与已定位的父级元素左端距离50
  top: 50rpx;                // 与已定位的父级元素上端端距离50

二、样式基础

 1. 尺寸
  width: 228rpx;   // 宽度
  height: 228rpx; //  高度
  min-width:     //最小宽度
  max-width:    //最大宽度
  min-height:   //最小高度
  max-height:  //最大高度
  ...

  2. 背景

background-color: darkcyan;   //背景颜色
...

  3. 边框

  border-radius: 20%;    //边框圆角
  border-width: 5px;      //边框宽度
  border-color: #ddd;    //边框颜色
  border-style: solid;     //边框样式
  ...

  4. 边距

margin: 20rpx;      //外边距，边框距离父级元素的距离
margin: 10rpx 20rpx 30rpx 40rpx;    // 上右下左
padding: 20rpx;    //内边距，边框距离元素的距离
padding: 10rpx 20rpx 30rpx 40rpx;    // 上右下左

  5. 文本

font-size: 30px; //字体大小
6. 其它(列表、内容、表格...)

PS：样式选择器 与CSS选择器相同，部分不可用