美文网首页
小程序CSS知识点

小程序CSS知识点

作者: 独孤流 | 来源:发表于2018-03-19 13:19 被阅读29次

一、flex布局
Flex 布局教程:语法篇
Flex 布局教程:实例篇

二、CSS position 属性总结
CSS position 属性总结

二、box-sizing
学会使用box-sizing布局

三、伪类和伪元素
::before和::after伪元素的用法

关于小程序button控件上下边框的显示和隐藏问题

四、text只显示一行或指定行数
4.1、只显示一行

text{
    overflow:hidden; //超出一行文字自动隐藏
    text-overflow:ellipsis;//文字隐藏后添加省略号
    white-space:nowrap;  //强制不换行
    }

4.2、指定显示2行

text{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;\*指定最多显示2行*\
-webkit-box-orient: vertical;
}

五、CSS子选择器
第二个p p:nth-child(2),

六、让scroll-view不显示滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

七、让scroll-view滚动到指定位置
7.1、让某个子View滚动到可见的顶部,利用scroll-into-view属性设置对应的子view的id即可
7.2、让某个子View滚动到指定的位置,比如让选中的View滚动到中间而不是顶部,竖直滚动则利用scroll-top,水平滚动则设置scroll-left,具体的值需要通过相应的计算得到

相关文章

网友评论

      本文标题:小程序CSS知识点

      本文链接:https://www.haomeiwen.com/subject/mvzuqftx.html