微信小程序 - 2.布局组件属性

一、wxss

官方文档 : https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

1.尺寸单位

小程序规定了全新的尺寸的单位 "rpx" , 其原理是五十设备原先的尺寸 , 统一规定屏幕宽度为750rpx , 换算:

设备	rpx换算px(屏幕宽度为750)
iPhone 5	1rpx = 0.42px
iPhone 6	1rpx = 0.5px
iPhone 6 Plus	1rpx = 0.522px

1. 小程序中 不需要主动引入样式文件
2. 需要吧页面中某些元素的单位由 px 改为 rpx
   1. 设计稿 750px ; 750 px = 750 rpx ; 1 px = 1 rpx
   2. 把屏幕宽度改为 375px ; 375 px = 750rpx ; 0.5 ox = 1 rpx
   3. 存在一个设计稿 宽度未知 page
      (1) 设计稿 page 存一个元素 宽度100px
      (2) 拿以上需求取实现不同宽度样式的页面适配
      page px = 750 rpx ; 1 px = 750 rpx /page ; 100 px = 750 rpx * 100 / page
   4. 利用calc属性 (css和wxss都支持的一个属性)
      (1) 750和rpx中间不要留空格
      (2) 运算符的两边也不要留空格

 view{
     /* width: 200rpx; */
      height: 200rpx;
      font-size: 40px;
      background-color: turquoise;
      /* 以下代码写法是错误的 */
      /* width: 750rpx*100/375; */
      width: calc(750rpx*100/375);
  }

2.常用属性

background-color	背景色
color	前景色
font-size	字体大小
border	边框
width	宽度
height	高度

background-color

3.书写位置

1. 内联样式 - style

<view style="color:red,background-color:yellow">测试</view>

2. 业内样式 - class
   (1). 页面的wxss文件内的样式
   (2).会自动作用在同页面的wxml页面结构 ( 对其他页面无效 )

<view class="container"></view>

.wxss文件中定义container(前边必须要有. )

 .container{
    height: 100vh; /*高100视窗,这里写100%无效*/
    display: flex; /*flex布局方法 */
    flex-direction: column;/*垂直布局*/
    align-items: center;/*水平方向居中*/
    justify-content: space-around;/*垂直方向分散布局*/
}

3. 全局样式 - app.wxss
   样式会作用所有页面结构
   app.wxss文件中定义一个样式

.testWxss{
  color: red;
  font-size: 50rpx;
}

引用wxml文件中直接使用

 <text class="testWxss">测试全局wxss样式</text>

直接显示效果

4.优先局

内联 > 页面 > 全局

tip : !important 可以提升优先局
wxml文件中定义两个view,都引用全局app.wxss中的样式,同时自己也加了样式

<view class="testWxss" style="color: blue;font-size: 30rpx;">测试全局wxss样式</view>
<view class="testWxssImp" style="color: blue;font-size: 30rpx;">测试全局wxss样式,app.wxss中增加了优先级</view>

app.wxss文件定义样式,其中一种使用!important增加优先级

.testWxss {
  color: red;
  font-size: 50rpx;
}
/* 使用!important增加了优先级 */
.testWxssImp {
  color: red !important;
  font-size: 50rpx !important;
}

加了!important样式的使用了全局的样式,而不是内联的样式

二、flex布局

1.基本概念

1. 容器和项目

<view class="a">
    <view class="b">
         <view class="c"></view>
    </view>
</view>

对a,b而言 : a 容器 b 项目

对b,c而言 : b 容器 c 项目

2. 坐标轴

   
   坐标轴

2.容器属性

1. flex-direction 决定元素的排列方向(用于设置主轴方向,通过设置坐标轴可以规定项目的排列方向)**

.container{
      display:flex;
      flex-direction:row(默认)  row-reverse | column | column-reverse
}

row : 默认值 , 主轴在水平方向上从左到右 , 项目按照主轴方向从左到右排列

row-reverse : 主轴是row的反方向 , 项目按照主轴方向从右到左排列

column : 主轴在垂直方向上从上而下 , 项目按照主轴方向从上往下排列

column-reverse : 主轴是column的反方向 , 项目按照主轴方向从下往上排列

2. justify-content 元素在主轴的对齐方向(用于设置项目在主轴方向上的对齐方式 , 以及分配项目之间及其周围多余的空间)**

    .container{

      display:flex;

      justifu-content:flex-start(默认值) flex-end | center | space-around | space-between

    }

flex-start : 默认值 , 标识项目对齐主轴起点 , 项目间不留空隙

center : 项目在主轴上居中排列 , 项目间不留空隙,主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴重点的距离

flex-end : 项目对齐主轴重点 , 项目间不留空隙

space-between : 项目间距相等,第一个和最后一个项目分别离起点/终点的距离为0

space-around : 与space-between相似 , 不同之处为第一个项目里主轴起点和最后一个项目离主轴终点的距离为中间项目间距的一半

3. align-items 元素在交叉轴的对齐方向(用于设置项目在行中的对齐方式)**

.container{
     display:flex;
     align-items:stretch(默认值) | flxe-start | center | flex-end
}

stretch : 默认值 , 未设置项目尺寸时将项目拉伸至填满交叉轴

flex-start : 项目顶部与交叉轴起点对齐

center : 项目在交叉轴居中对齐

flex-end : 项目底部与交叉轴终点对齐

4. align-content 用于多行排列时设置项目在交叉轴方向的对齐方式 , 以及分配项目之间及其周围多余的空间**

.container{
    display:flex;
    align-content:stretch(默认值) | flex-start | center | flex-end | space-around | space-between
}

stretch : 默认值 , 未设置项目尺寸时将各行中的项目拉伸至填满交叉轴 , 当设置了项目尺寸时项目尺寸不变 , 项目行拉伸至填满交叉轴

flex-start : 首行在交叉轴起点开始排列 , 行间不留间距

center : 行在交叉轴中点开始排列 , 行间不留间距 , 首行离交叉轴起点和行尾离交叉轴终点的距离相等

flex-end : 尾行在交叉轴终点开始排列 , 行间不留间距

space-around : 行与行间距相等 , 首行离交叉轴起点和尾行离交叉轴终点的距离为行与行间距的一半

space-between : 行间间距、首行离交叉轴起点和尾行离交叉轴终点距离相等

5. flex-wrap 决定元素如何换行(用于规定是否允许项目换行 , 以及多行排列时换行的方向)**

.container{
    display:flex;
    flex-wrap:nowrap(默认值) | wrap | wrap-reverse
}

nowrap : 默认值 , 标识不换行 , 如果单行内容过多 , 项目宽度可能会被压缩

wrap : 当容器单行容不下所有项目时允许换行排列

wrap-reverse : 当容器单行容不下所有项目时允许换行排列 , 换行方向为wrap的反方向