首页 > 微信 > 详细

微信小程序 - wxss

时间:2021-02-16 17:58:51      阅读:41      评论:0      收藏:0      [点我收藏+]

WXSS

1.class和id选择器

  • class选择器可以多次使用,可以重复

    .red{
    	background:red;
    }
    
  • id选择器只能使用一次,不能重复

    #title{
    	background:green;
    }
    

2.颜色的三种设置方式

  • 十六进制
  • RGB
  • 颜色名称

3.CSS中文本的常用样式

  • 文本的对齐方式

    • text-align: center 文本居中对齐
    • text-align:left 文本居左对齐
    • text-align:right 文本居右对齐
  • 文本修饰

    • text-decoration:overline 上划线
    • text-decoration:line-through 中间划线
    • text-decoration:underline 下划线
  • font-size设置字体大小

4.CSS边框与边距

  • margin 外边框
  • padding 内边距 (上、右、下、左)
  • border 边框,实线

5.CSS边框border(三个样式)

  • border-style设置样式

    • border-style:solid 实现
    • border-style:dashed 虚线
    • border-style:dotted 点线
  • border-width

  • border-color

  • 三个样式可以一起写:

    • border:2rpx yellow solid

6.border-radius圆角边框

7.flex布局

用于父元素的属性

  • display:flex 默认方向row
  • flex-direction:主轴方向
  • flex-wrap:wrap 使元素动态调整
  • justify-content:主轴上的排列
  • align-item:交叉轴方向上的排列方式

用于子元素的属性

  • flex-grow:1 占据剩余的空间
  • flex-shrink:0 不可压缩,默认为1
  • flex-basis:盒子的初始值
  • flex:1 元素分一份(包含上面三个元素)
  • align-self:改变父元素对自身的影响
  • order:排序书顺序(数字,默认为0)

微信小程序 - wxss

原文:https://www.cnblogs.com/zhailipu/p/14406730.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!