小程序-WXSS入门知识

选择器

• 类选择器 class ，. 号开始的

 /* 多个地放被使用;一个地方使用多个 */
  <view class="course-card sec-card"></view>

• element

• 组合选择器，逗号分隔

.course-card image {
  width: 100%;
  border-radius: 5px;
}

• ID 选择器

• 后代选择器，空格分隔

颜色

• rgb/16进制
• 哪些地方使用颜色，字体、背景、边框、阴影
• family size weight

 font-size: 14px;
 color: #23b8ff;

盒模型

• 外边距、内边距、边框和内容部分
• 做小程序的时候，尽量不用 px ，使用%
• box-sizing content-box border-box

  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 10px;
  margin-bottom: 10px;

Positon 定位

• fixed 相对窗口
• relative 相对自己
• absolute 相对于最近的非 static ，page

Flex

• 布局
• 父容器，子容器
• display: flex flex试用网站

.list-scroll-view {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}