前端学习历程10

CSS

关键帧动画

animation复合属性。检索或设置对象所应用的动画特效。

animation-name 检索或设置对象所应用的动画名称

说明：必须与规则@keyframes配合使用，eg：@keyframes mymove{}   animation-name:mymove

animation-duration     检索或设置对象动画的持续时间

 animation-duration:3s

animation-timing-function   检索或设置对象动画的过渡类型

说明：

linear：线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0 1.0） 

ease:平滑过渡。等同于贝塞尔曲线（0.25，0.1，0.25 1.0） 

ease-in：由慢到快。等同于贝塞尔曲线（0.42，0，1.0 1.0） 

ease-out：由快到慢。等同于贝塞尔曲线（0，0，0.58 1.0）

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线（0.42，0，0.58 1.0）

网格布局

含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

区别：Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的布局。但是它们也存在重大区别。

flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。

Grid布局是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看成是二维布局。

display:grid;

行列划分：

规定行属性：gird-template-row：

固定列属性：grid-template-column：

后面的取值数量代表是多少行，多少列（绝对数量或者百分比表示）

gird-template-row：200px/33.33%/repeat(3,33.33%)/repeat(auto-fill,200px)/100px 1fr 300px/minmax(100px,200px)  200px 300px/100px auto 300px
grid-template-column：300px/33.33%/repeat(3,33.33%)/repeat(auto-fill,20%)/100px 1fr 300px/minmax(100px,200px)  200px 300px/100px 300px auto

间距:

grid-row-gap:20px---------行间距
grid-column-gap:20px-------列间距
grid-gap:20px 20px---------复合写法

区域命名与合并

合并：grid-template-areas：'a a c'
                          'd e f'
                          'g h i'
.box:nth-child(1){grid-area:a}