微信小程序首页知识点

选择器

• 类选择器.classname
• 组件选择器elementname
• id选择器#idname

• 后代选择器，空格分隔: .info desc
• 组合选择器，逗号分隔： view, .card

颜色与字体

颜色

• 红黄蓝
• 0~255
• rgb模式：rgb(255,255,255)： 十六进制写法 0xffffff

字体

• front-size： 大小
• front-weight: 粗细
• front-family：字体，通常不设置，用默认字体

盒模型

• 从外到内：
  • 外边距 margin
  • 边框 border
  • 内边距 padding
  • 内容 content
• width: 尽量用%， 不要用px
• box-sizing: 值如下
  • content-box 宽度表示为：内容的宽度
  • border-box 宽度表示为：边框及以内的宽度
• position 定位方式
  • static
  • relative 参考点：自己原始位置
  • absolute 参考点：非static的最近的父级元素
  • fixed 参考点：视窗
• flex 布局
  • 父容器，子容器
  • https://coding.imweb.io/demo/flex/index.html
  • display: flex;
  • flex-direction 排版方式，row/column/row-reverse/clomun-reverse
  • flex-grow 自动伸缩填满区域，0/1
  • flex-wrap 是否自动换行， nowrap/wrap/warp-reverse
  • justify-content 行排列方式, flex-start/flex-end/center/space-between/space-around
  • align-content 列排列方式， flex-start/flex-end/center/space-between/space-around
• scroll-view
  • 滚动条区域
  • 不支持flex
  • scroll-y="true" 加Y轴滚动条