这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。
这12个知识点是我个人认为的，下面我们就来看看这12个知识点。
1.怎么让一个不定宽高的 DIV，垂直水平居中?
使用Flex

只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

- 阅读剩余部分 -

demo地址

幻灯片

• 使用微信小程序原生组件swiper实现。

    <swiper 
        indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" 
        interval="{{interval}}" 
        duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="index">
            <swiper-item>
                <image src="{{item}}" class="slide-image" 
                mode="scaleToFill"/>
            </swiper-item>
        </block>
    </swiper>

配合在逻辑页面配置数据实现幻灯片

- 阅读剩余部分 -

-webkit-overflow-scrolling

概述

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

在样式表对应的class里添加属性

值:auto

-webkit-overflow-scrolling: auto;
使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

值:touch

-webkit-overflow-scrolling: touch;
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

方法一 利用 line-height 实现垂直居中

    #example1 {
        height: 100px;
        line-height: 100px;
        background: #161616;
        color: #fff;
        width: 200px;
    }

    <div id="example1">单行文字垂直居中</div>

这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出。

方法二 利用 display: table 实现垂直居中

    #example2 {
        height: 100px;
        background: #161616;
        color: #fff;
        width: 400px;
        overflow: hidden;
        display: table;
    }
    #example2 .inner{
        display: table-cell;
        vertical-align: middle;
        height: 50px;
        background:#999;
    }

    <div id="example2">
        <div class="inner">块区域垂直居中</div>
    </div>

- 阅读剩余部分 -