目录知识

  • ./ 同级目录下
  • ../ page目录下
  • ../../根目录下

wxss

  1. 类选择器 class ,.号开始
    1.1 多个地方被使用,不互相干扰
  2. 一个地方使用多个(后面优先级高,覆盖前面
  3. element(page、imags、view、命中范围广不建议使用)
  4. 组合选择器,逗号分隔(拼凑的选择器)
  5. ID 选择器
  6. 后代选择器,空格分隔(父元素放在前面时,只会选择当前的元素,又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

颜色字体

  1. rgb/16进制 #FFFFFF rgb(255.255.255)
  2. 哪些地方使用颜色,字体、背景、边框、阴影
  3. family size weight (字体样式、大小、粗细)

盒模型

  • 边距:(margin:10px 0;上下10px,左右0)上,左右,下
  • 边距:(margin:10px 0 5px 20px;上右下左)
  • 外边距:marginwidthheight
  • 内边距:padding 边框 border
  • px像素单位,%相对单位
  • 盒模型就是:大盒子套小盒子,小盒子有外边距,边框,内边距,内容
  • 圆角:border-radius: 5px;
  • 外边距、内边距、边框和内容部分
  • 做小程序的时候,尽量不用px,用%百分比
  • box-sizing 你要了解它唯一的计算方式就是计算宽度,高度,它们的计算值不一样,它的两个取值是content-boxborder-box
  • content-box 设置了内容宽度
  • border-box 设置了边框,内边距,content(内容)

定位

  • position 元素的定位方式
  • static 静态
  • relative 相对
  • absolute 绝对
  • fixed 固定

坐标点

  • x left/right
  • y top/bottom
  • fixed 相对窗口
  • relative 相对自己
  • absolute 相对于最近的非 static,如果一直没有最近非static,就是全局page

flex

  • 布局
  • 父容器、子容器(盒子,可任意布局)
  • display:flex

分布与对齐

  • justify-content 设置主轴的分布
  • align-items 设置主轴的对齐
END
本文作者: 文章标题:微信小程序笔记
本文地址:https://plaidweb.cn/index.php/blog_learning/001.html
版权说明:若无注明,本文皆时光荏苒web原创,转载请保留文章出处。
最后修改:2022 年 06 月 18 日
感谢您的赞赏,将用于联合国儿童基金会及服务器维护