布局基础

flex布局基础

flex容器属性

flex-direction决定元素的排列方向
flex-wrap决定元素如何换行（排列不下时）
flex-flow flex-dircetion和flex-wrap的简写
justify-content元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式

flex元素属性

flex-grow 当有多余空间时，元素的放大比例
flex-shrink 当空间不足时，元素的缩小比例
flex-basis元素在主轴上占据的空间
flex 是grow、shrink、baiss、的简写
order定义元素的排列顺序
align-self定义元素自身的对齐方式

相对定位和绝对定位

相对定位的元素是相对自身进行定位，参照物是自己
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位

样式基础

样式的基本使用

样式的属性

尺寸

背景

边框

边距

文本

其他（列表，内容，表格...）

样式选择器的使用

基本选择器

类选择器.name{}
ID选择器#name{}
元素选择器image{}
通配符选择器*{}(小程序暂不支持)
包含选择器p c{}(例：.name pwd{})
子元素选择器p>c{}(只影响子view，若子view下还有子view不受影响)（用不了）
邻近兄弟元素选择器c+c{}（用不了）
通用兄弟元素选择器c~c{}（用不了）

属性选择器（用不了）

E[attr]
E[attr="value"]
E[attr~="value"]
E[attr|="value"]
E[attr^="value"]
E[attr$="value"]
E[attr*="value"]

伪类选择器

动态伪类选择器（:link,:visited,:hover,:active(点击),:focus（输入框获取焦点））
状态伪类选择器（:enabled,:disabled,:checked）
选择伪类选择器(:first-child,:last-child,:nth-clid(),:nth-last-child(),:nth-of-type(),:nth-last-of-type(),:first-of-type,:last-of-type,:only-child,:only-of-type)
空内容伪类选择器(:empty)
否定伪类选择器(:not)
伪元素(::first-line,::first-letter,::before,::after,::selection)

组件使用

Tips:除了text组件以外的其他组件都无法长按选中
text组件无法解析Html

视图容器

基础内容组件

表单组件

操作反馈小工具

导航

多媒体

地图与lbs

画布与游戏