web第三天

动画

8个属性

name

设置动画的名称

duration

设置动画的播放时间

timing-function

设置动画的速度曲线

linear 匀速

steps 逐帧动画

delay

设置动画延迟时间

iteration-count

设置动画播放次数

infinite 无数

direction

设置动画方向

normal 默认值 先正再正

alternate 先正再反

fill-mode

设置延迟状态和结束状态

backword 设置延迟时间内 元素变成 第1帧的画面

forwords 设置动画结束后 停留在最后一帧

play-state

动画播放还是暂停

播放 默值 running

暂停 paused

方法：定义动画给动画加上关键帧效果

动画效果

功能：效果分类属性，使用

移动端屏幕知识

了解

逻辑分辨率

设备分辨率

PPI

srcset 属性

布局视口

理想视口

flex

父项

1 设置 为 flex display:flex; 设置普通的盒子为flex盒子

设置主轴对齐方式 justify-content

flex-start

左对齐

flex-end

右对齐

center

居中

sb space-between

先两侧 间隔

sd space-around

间隔 两侧隔间 小于中间

sv spave-evenly

绝对平分

子项

侧轴对齐(设置元素，上下的位置)

设置侧轴对齐方式（单行）

align-items：center

一、flex-start 上对齐

二、flex-end 下对齐

三、center 垂直居中

换行属性

flex-wrap：wrap 换行

nowrap 不换行

多行属性

align-content: center;

flex-end

flex-start

center

space-between

space-around

space-evenly

设置主轴对齐方式

flex-direction

默认值 从左到右 row

从右到左 row-reverse

（常用） 从上到下 column

从下到上 column-reverse

子项

flex 设置子项占父项的宽度（高度）的比例

设置子项自己 在侧轴上的对齐方式

align-self

flex-start 左对齐

flex-end 右对齐

center 居中

默认的宽度 等于是由内容撑开

默认的高度 等同于父项的高

flex：1 设置子项的 宽度

align-seft 设置 子项在侧轴上的对齐

主轴方向改了 column

默认的高度等于是内容撑开

flex：1 设置 子项的高度

align-seft 设置 子项在侧轴上的对齐（水平）

默认的宽度等于是父项的宽度

删除线

text-decoration: line-through;

网页尾部要脱离公共模块

position: fixed;

案例，设情况而定

\