选择器
- 类选择器.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轴滚动条