读weui源码后笔记

529 阅读1分钟

1、text-align-last

text-align-last 属性规定如何对齐文本的最后一行。取值有:auto|left|right|center|justify|start|end|initial|inherit (ps : text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。) text-align: justify是实现两端对齐文本效果。

2、env() 和 constant()

env() 和 constant()是iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:safe-area-inset-left:安全区域距离左边边界距离 safe-area-inset-right:安全区域距离右边边界距离 safe-area-inset-top:安全区域距离顶部边界距离 safe-area-inset-bottom:安全区域距离底部边界距离 (ps:constant() 跟 env() 需要同时存在,而且顺序不能换。)

例如:

div{
    bottom: calc(50px + constant(safe-area-inset-bottom));
    bottom: calc(50px + env(safe-area-inset-bottom));
}

3、mask-image

weui的icon使用图片用的是mask-image(设置元素上遮罩层的图像),mask-image跟background是一对孪生兄弟;类似于一个是盒子的地面(background),一个是盒子的盖子(mask-image),其拓展属性的用法是相似的。

4、:not 选择器

weui在很多地方使用了:not 选择器,例如:.weui-btn_primary:not(.weui-btn_disabled):active

5、-webkit-tap-highlight-color

weui在有点击事件的地方都加了-webkit-tap-highlight-color:rgba(0,0,0,0) 样式

//webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节。

是因为IOS系统在点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,需要设置-webkit-tap-highlight-color为任何颜色。