「微信小程序」 | 实践项目笔记（1）-- css部分

微信小程序项目实践中关于wxss的一些笔记

基础知识

盒子模型（box model）

基本分为四部分：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框（border）

• border-style：none、dotted、dashed、solid，double

• border-width

• border-color

可以在中间加入方向指示某一边框 如 border-right-color

采用简写模式：border: 2px solid #fff

外边距（margin）

指定元素周围的空间

阴影（box-shadow）

box-shadow: h-shadow v-shadow blur spread color inset;

.md{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

弹性盒子（flex box）

一种好用的布局模型

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

• flex-direction：定义排列方向

  flex-direction: row | row-reverse | column | column-reverse

• justify-content：定义内容对齐（沿主轴线）

  justify-content: flex-start | flex-end | center | space-between | space-around

  

• align-items：定义内容对齐（沿侧轴）

  align-items: flex-start | flex-end | center | baseline | stretch

• flex：定义占比

  .wrap{
      display: flex;
      .item1{
          flex: 2;
      }
      .item2{
          flex: 3;
      }
  }

• flex-wrap：定义是否换行

一些操作

同一属性的不同方向设置

style：attr1，attr2，attr3，attr4
/*上->右->下->左*/
style：attr1，attr2，attr3
/*上->左右->下*/
style：attr1，attr2
/*上下->左右*/
style：attr1
/*上下左右属性相同*/

页脚定位

.foot{
    position: absolute;
    buttom: 28rpx;
    text-align: center;
}

圆形Logo

.logo{
    border-radius: 50%;
}

选择器

• less语法中：&代表上一级父元素
• :nth-of-type(1)可以选择第几个元素

.content{
        margin: 4rpx 25rpx;
        flex:1;
        font-size: 30rpx;
        color: var(--commentColorLight);
        &:nth-of-type(1){
            margin-top: 25rpx;
        }
        &:nth-last-of-type(1){
            margin-bottom: 25rpx;
        }
    }

只显示几行字

• word-break：自动换行的方式

  属性值	说明
  normal	使用默认的换行规则
  break-all	允许在单词内换行
  keep-all	只能在半角空格或连字符处换行

• text-overflow：规定当文本溢出包含元素时发生的事情

  属性值	说明
  clip	修剪文本
  ellipsis	使用省略号表示被修剪的文本
  string	使用给定的符号表示被修剪的文本

.meta {
    width: 100%;
    margin-left: 6rpx;
    font-size: 28rpx;
    color: #888888;
    font-size: 28rpx;
    /*自动换行*/
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;  
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;       /*定义可以显示几行*/
    }

定义全局变量

可以在app.wxss定义全局的变量

page{
    --themeColor: #1296db; 
}

然后在页面page.wxss使用

.item{
    color: var(--themeColor)
}

自定义按钮样式

.btn{
    height: 160rpx;
    width: 200rpx;
    margin: 0 60rpx;
    border-radius: 16rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    &::after {
      border: 0;/*requied*/
      border-radius: 16rpx;
    }
}
.btn_hover{
    /*要使用!important*/
    background-color: #f4f4f4 !important;
    opacity: 0.9 !important;
}

在wxml文件中定义hover样式

<button bind:tap="onEdit" hover-class="btn_hover">