1.定位佈局
    position

    相對定位    
        position：relative
        不脫離文件流
        通過定位屬性在移動的時候，相對於原來的所在的位置

        定位屬性：
        left/right/bottom/top
        left:50%;

    絕對定位
        position:absolute
        脫離文件流
        通過定位屬性在移動的時候，相對於距離它最近的父定位元素，如果父定位元素不存在，則相對於瀏覽器視口
    固定定位
        position:fixed
        脫離文件流
        通過定位屬性在移動的時候，相對於瀏覽器視口

        width/left/margin-left
        百分數 相對於誰？

2.百分比的參考元素：
    1)正常文件流中的元素
        百分比相對於：父元素

    2）相對定位
        百分比相對於：父元素

    3）絕對定位
        百分比相對於：父定位元素

3.伸縮盒佈局
    容器
        display:flex;
        flex-direction:row/column;

        justify-conotent:-
            定義了子元素在主軸上的排列規則
            -flex-start;
            -flea-end
            -center;
            -space-around;
            -space-between;

        align-items:stretch;
            定義了子元素在交叉軸上的排列規則
            -flex-start
            -flea-end
            -center;
            -flex-wrap:nowrap/wrap;

    子元素
        flex-basis        基本值
        flex-grow        分配準則、增長
        flex-shrink        收縮準則

        wid/height
        flex

4.如何佈局
    定位佈局
    定位佈局+flex

5.動畫
    1)animation
        1.動畫幀定義
        @keyframes 動畫名{
            from{
                width:200px;
            }
            to{
                width:50px;
            }
        }

        2.動畫配置
            .left-nav{
                ...
                animation-name:動畫名；
                animation-duration:2s;
                animation-iternation-count:數字/infinite(無限)
                animation-direction:-
                    -normal動畫從0執行到100%；
                    -reverse執行順序反轉，從100%到0；
                    -alternate交替執行，從0到100%，再從100%到0；
                animation-fill-mode:-
                    -forwards;
                    -backwards;
                    -both;
                animation-timing-function:-
                    -ease-in;
                    -ease-out;
                    -ease-in-out;
                    -linear;
                    steps(4);
                animation-play-state:running/paused;

            }
    2)transition 
    3)transform