美文网首页
小程序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