Today

1.flex 和网格布局 的区别

grid 是二维布局，flex 是哦一维布局

决定 用 网格还是felx 盒子 ：

flex 盒子 从内容 入手，一个使用弹性盒的理想情形是你有一组元素，希望它们能平均地分布在容器中。你让内容的大小决定每个元素占据多少空间。如果元素换到了新的一行，它们会根据新行的可用空间决定它们自己的大小。

而 grid 从布局入手。当使用CSS网格时，你先创建网格，然后再把元素放入网格中，或者让自动放置规则根据把元素按照网格排列。我们能创建根据内容改变大小的网格轨道，但整个轨道的大小都会随之改变。

2.重写轮播图

轮播效果说到底就是一个动画效果，而通过css3的新属性 animation 我们就可以自定义一个动画来达到轮播图效果，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称，默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放，也可以指定次数

animation-fill-mode  backwards 让动画回到第一帧的状态

@keyframes 指定动画名称和动画效果。

dom结构搭建

首先要有一个容器作为轮播图的容器，同时由于要实现滑动切换，所以内部需要有一个装载所有待切换内容的子容器

如果子容器中的内容是左右切换的，则需要将内容左右排列开

小圆点 动画：

关于 这个animation-delay:-1s 

animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

轮播图片第一张图初始位移 为0：

Tomorrow

1.完成当前任务

Gain

1.

align-self: stretch;

元素被拉伸以适应容器。

如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

2. css  轮播图

3. css 动画 transition  和 animation 属性

4.

CSS3中translate、transform和translation的区别和联系

https://blog.csdn.net/linbooooo1987/article/details/72974184

 Pain

1. 今日没有