快应用学习使用小结
1、关于border-box
快应用框架只支持使用 border-box 模型不支持 box-sizing 属性,就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
2、关于长度单位
只支持px与%,其中%也不是每次都管用,当%不行的时候还是试试px;
搜索config.designWidth就可以动态配置,默认值是750.让UI小姐姐设计稿用750px宽度,那我们就可以直接无转换使用px了。
(设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度)
3、关于布局
快应用默认使用弹性盒布局(flex),不支持浮动(float)也就不支持清除浮动(overflow);display只有= flex || none;两个选择值;
4、关于浮动
快应用浮动只支持 fixed,其他的static(静态的)、relative(相对的)、absolute(绝对的)定位与z-index都不支持;写了也不起作用,要实现z-index的效果时,快应用提供了一个 stack 组件,该组件中的子组件排列方式为层叠排列,每个直接子组件按照先后顺序依次堆叠,覆盖前一个子组件。
5、关于图片
⑴ 设置背景图片:background-image:暂时不支持与 background-color,border-color 同时使用;支持本地图片资源;1030+支持网络图片资源;1010+版本支持 9-patch图
使用时需要为本地图片,不能直接使用background进行设置,图片会加载失败。
关于背景图样式请点击:背景图样式更多
⑵ 使用外链图片,则需使用 image 标签进行渲染。
关于image更多样式请点击:image
6、关于style样式
⑴:
<!-- 导入外部文件,代替style内部样式 -->
<style src="./style.css"></style>
<!-- 目前支持less、sass的预编译 -->
<style lang="less" src="./lessFile.less"></style>
⑵:
<!-- 合并外部文件 -->
<style>
@import './style.css';
a{
}
</style>
⑶:
<!-- 内联inline -->
<div style="color:red;margin:10px;"/>
7、关于文本精细处理
不支持精细地处理文本的样式,如:
text-overflow, letter-spacing, line-break ,overflow-wrap, tab-size, text-align, text-align-last, text-indent, text-justify, text-size-adjust, text-transform, white-space, word-break, word-spacing。
8、限制
仅可以使用并列选择、后代选择器、子代选择器;
颜色值不支持缩写,通常我们习惯用#fff,在快应用不支持缩写,要求写成#ffffff;
伪类支持不完全(支持:disabled,:checked,:focus等)
9、关于文本
可以直接放置文本的组件:
(1):a 超链接(默认不带下划线),文本内容写在标签内容区,支持转义字符" \ “,子组件只支持< span >;
(2):text,文本内容写在标签内容区,支持转义字符” \ ",子组件仅支持< a>与< span>;
(3):span,格式化的文本,只能作为< text>、< a>和< span>的子组件;
(4):label,为 input、textarea 组件定义标注,不支持子组件
以上直接放入文本可显示,不能放置于div组件中,不显示。