周报六

1. 关于flex布局的总结

    display: inline-flex;
    display: flex;

    容器属性：6种
        1. flex-direction: row | row-reverse | column | column-reverse;
    
        2. flex-wrap: nowrap | wrap | wrap-reverse;

        3. flex-flow: <flex-direction> || <flex-wrap>;

        4. justify-content: flex-start | flex-end | center | space-between | space-around;
    
        5. align-items: flex-start | flex-end | center | baseline | stretch;
   
        6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    项目属性：6种
        1. order: <integer>;

        2. flex-grow: <number>; /* default 0 */
        
        3. flex-shrink: <number>; /* default 1 */

        4. flex-basis: <length> | auto; /* default auto */

        5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

        6. align-self: auto | flex-start | flex-end | center | baseline | stretch;

2. 关于Grid布局的总结

	1.容器和项目
		1.1 行、列和单元格
		1.2 网格线
A. 容器属性
	2 容器属性
		2.1 display属性
		2.2 display：inline-grid效果
	
	3 grid-template-columns 和 grid-template-rows
		3.1 repeat
		3.2 auto-fill
		3.3 fr
		3.4 minmax
		3.5 auto关键字
		
	4  grid-row-gap和grid-colunm-gap属性
			4.1 grid-row-gap：设置行与行之间的间隔
			4.2 grid-colunm-gap：设置列于列之间的间隔
				注：grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap
	
	5 grid-auto-flow
	
	6 
		6.1 justify-items、align-items 、place-items 和 place-item属性
	  			justify-items: start | end | center | stretch;
	  			align-items: start | end | center | stretch;
	  			place-items: <align-items> <justify-items>
	
		6.2 justify-content属性、align-content属性和place-content属性
		  		justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
	  			align-content: start | end | center | stretch | space-around | space-between | space-evenly
	 
	7 justify-content、align-content和place-content
		justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
		align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
		




B.项目属性
	1. grid-colunm-start属性
	2. grid-colunm-end属性
	3. grid-row-start属性
	4. grid-row-end属性

注：Grid与flex布局的区别

1. 弹性布局（flex）：是轴线布局（一维布局）
2. 网格布局（grid）：是将容器划分成行和列，产生单元格，然后指定项目所在的单元格（二维布局）

3. 轮播图纯css写法

HTML：

            <div class="container">
                <div class="photo">
                    <img src="1.gif" alt="">
                    <img src="2.gif" alt="">
                    <img src="3.jpg" alt="">
                </div>
            </div>

CSS：

        .container {
            width: 300px;
            height: 400px;
            overflow: hidden;
        }
        
        .photo{
        	width: 900px;
        	animation: switch 5s ease-out forwards; /*forward停在最后一张*/
        											/*infinite轮播*/
        }
        
        .img {
            float: left;
            width: 300px;
            height: 400px;
        }
        @keyframes switch {
            0%,
            35% {
                margin-left: 0;
            }
            35%,
            70% {
                margin-left: -300px;
            }
            75%,
            100% {
                margin-left: -600px;
            }
        }
    }